Css grid, как растянуть последние блоки по ширине?
Есть такой пример, Клик codepen
Можно как-то растянуть последние 3 элемента, чтобы они заполнили свободное пространство ? По типу как у flex есть flex-grow: 1 ?
PS. Либо может как-то по другому можно сделать такую сетку на гридах ? мне нужно точно также как в примере, только 8-9-10 элемент тянутся на 33.333%
Дополнительно:
Если количество блоков не определено заранее, то как во флексах сделать не выйдет.
Если количество блоков фиксировано, то сделать можно. Нужно увеличить количество колонок до общего кратного всех вариантов количеств ячеек в строках. В данном случае вам нужно НОК от двух чисел - 4 и 3. Это 12 вроде бы.
Теперь задаете сетку в 12 колонок и раскидываете по ним блоки.
snippet
- Спасибо, но к сожалению не определенно, точнее сразу блоков будет 10, но есть кнопка "показать еще". Прогер будет туда еще блоки грузить
- Breeze1, ну тут можно во-первых, грузить по 10 блоков.
Во-вторых, предусмотреть все 10 возможных вариантов по количеству блоков от 1 до 10.
Прописать все это в классах, и объяснить программисту, что в случае, если блоков меньше 10, то нужно навешивать другие классы. - Breeze1, если известно количество колонок, то решается за счет nth-child для любого количества элементов.
https://css-live.ru/articles/resheno-s-pomoshhyu-c...
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для растяжения последних блоков по ширине в CSS Grid можно использовать свойство `grid-template-columns` с помощью ключевого слова `auto-fill` или `auto-fit`. Это позволит автоматически растягивать блоки на всю доступную ширину.
Пример использования:
```html
```
```css
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-gap: 10px;
}
.grid-item {
background-color: #f2f2f2;
padding: 20px;
text-align: center;
}
```
В данном примере блоки будут растягиваться автоматически на всю доступную ширину, при этом каждый блок будет иметь минимальную ширину 200px. Свойство `1fr` указывает на то, что блоки будут занимать оставшееся пространство в контейнере.
Таким образом, блоки будут растягиваться равномерно по ширине, а последние блоки будут занимать все доступное пространство.