Как убрать пустое место в grid?
У меня есть следующая структура html:
<div class="items"> <div class="item item-1">1</div> <div class="item item-2">2</div> <div class="item item-3">3</div> <div class="item item-4">4</div> <div class="item">5</div> <div class="item">6</div> <div class="item">7</div> <div class="item">8</div> </div> |
<div class="items"> <div class="item item-1">1</div> <div class="item item-2">2</div> <div class="item item-3">3</div> <div class="item item-4">4</div> <div class="item">5</div> <div class="item">6</div> <div class="item">7</div> <div class="item">8</div> </div>
Стили:
.items { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; grid-auto-flow: row; } .item { background: red; padding: 10px; height: fit-content; } .item-3 { height: 200px; } |
.items { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; grid-auto-flow: row; } .item { background: red; padding: 10px; height: fit-content; } .item-3 { height: 200px; }
Я задаю 3 элементу высоту в 200 пикселей, но при этом у блока 4 образуется пустое место заполняющее также 200px, как сделать так, чтобы у элементов с разной высотой не появлялось пустых мест у соседних блоков?
Ссылка на codesandbox:
https://codesandbox.io/s/relaxed-brattain-9r6l2p?f...
Дополнительно:
не открывается ваша песочница =(
Как убрать пустое место в grid?
- Не использовать грид.
Если была бы известна высота остальных блоков, то гриды бы помог за счет объединения ячеек. А так нет.
css columns, скрипты типа masonry, просто подкрутить на js и т.д.
Ответы:
Сделать маленькйи элемент такой же высоты
- Мне нужно убрать пустое место и поставить туда следующие элементы, а не заполнить его тем же элементом
- Евгений, ну вот другое дело, понятная формулировка запроса) тогда тебе нужно это
- imko, все равно пустое место не заполняется остальными элементами(
- Евгений, прочитал а оно не заработало? я как должен угадать что именно ты напиисал в коде?)
- imko, https://codesandbox.io/s/jovial-architecture-zk4cht
Применил для items grid-auto-flow: row; - Евгений, ты точно разобрался как работает то что описано в документации? Не просто написал первое попавшееся?
- imko, да, я же скинул ссылку на песочницу
- Евгений, судя по песочнице как раз не разобрался)
- imko, не удивительно что ваши решения не работают
- Алексей Гончаров, ну уж совсем то позориться не надо)
- imko, так позор это отвечать неправильно, тем самым тратить время авторов)
- Алексей Гончаров, а сталкерить человека в других вопросах и ничего не понимая в разработке спамить ему гадости из-за обиды не позор, я правильно понимаю?
- imko, вы же сталкерите в моих ответах. Плюс все таки верно сначало проверить и потом отвечать.
ничего не понимая в разработке
Говорит человек который не смог ответить на элементарный вопрос
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для удаления пустого места в grid можно использовать несколько подходов, в зависимости от конкретной ситуации.
1. Установить свойство `grid-auto-flow: dense;` на контейнер grid. Это свойство позволяет заполнять пробелы в grid, распределяя элементы как можно ближе друг к другу.
```html
.grid-container { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-flow: dense; }
```
2. Использовать свойство `grid-gap: 0;` для удаления отступов между элементами grid. Это позволит элементам занимать все доступное пространство без лишних отступов.
```html
.grid-container { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 0; }
```
3. Использовать свойство `grid-auto-rows: minmax(0, auto);` для уменьшения минимальной высоты строк в grid до нуля. Это позволит элементам занимать меньше места и избежать пустых пространств.
```html
.grid-container { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(0, auto); }
```
4. Проверить, что у каждого элемента grid правильно указаны свойства `grid-column` и `grid-row`, чтобы избежать лишних пространств между элементами.
Эти методы помогут убрать пустое место в grid и сделать его более компактным. Выберите подход, который лучше всего подходит для вашего конкретного случая и примените его к вашему коду.