Как сделать grid с разной высотой блоков?

Question

[koxac]

<div style="grid-template-columns:repeat(3, minmax(0, 1fr));display:grid;">
<div style="background:green;height:50px;">1: 50px</div>
<div style="background:green;height:200px;">2: 200px;</div>
<div style="background:green;height:50px;">3: 50px</div>
<div style="background:green;height:50px;">4: 50px</div>
<div style="background:green;height:50px;">5: 50px</div>
<div style="background:green;height:50px;">6: 50px</div>
</div>

Получаем


Как сделать так чтоб блоки 4 и 6 были под 1 и 3 без такого отступа? Т.е. убрать белое пространство между этими блоками

Comments

[Рома Зварич]

Предлагаю подробнее объяснить, какая у Вас ситуация и для каких целей это делается (какие реальные данные это должно представлять).
Потому что этого можно добиться, поставив пару костылей, но пример может не быть гибким и не подойти для реальной задачи.

[koxac]

Рома Зварич, решил попробовать разобраться с grid и использовать вместо float: left.
Но блоков может быть очень много, и все они разной ширины могут быть

[Сергей delphinpro]

Смотрите сюда https://developer.mozilla.org/en-US/docs/Web/CSS/g...

[Сергей delphinpro]

Вот еще какие-то попытки с этим свойством https://gist.github.com/Maux/aeb93924e46198a6b7ee2...

[koxac]

Сергей delphinpro, при добавлении этого свойства в мой пример, то вообще ничего не происходит, но если убрать height у блоков то тогда работает, но тогда у блоков высота растягивается до такой же высоты как у соседних блоков. Что тоже не подходит

Answer 1

[BuriedBeneath]

Если я правильно понимаю вопрос, то можно попробовать свойство grid-auto-flow: dense;

Comments

[koxac]

В данном примере не работает это свойство