Как уменьшить размер grid контейнера, если контента меньше чем задано в grid свойстве?

Question

[VegasChickiChicki]

У нас есть ситуация, когда мы имеем 2 блока, списка, грид сетка задана таким образом:

display: grid;
grid-template-rows: repeat(12, minmax(auto, 20px));
grid-column-gap: 100px;
grid-row-gap: 12px;
grid-auto-flow: column;

Проблема в том что если в контейнере будет 6 блоков, останется пустое пространство, я помогаю из-за грид сетки, 12 строк по 20px. Как можно убрать это пространство, если блоков меньше чем 12?

Comments

[Ankhena]

Можно поменять gap на margin

[VegasChickiChicki]

Ankhena, Проблема в том, что если у нас будет 6 блоков из 12, сетка все равно будет занимать высоту в 12 блоков... gap это пол беды...

Answer 1

[Ankhena]

Comments

[VegasChickiChicki]

Спасибо огромное! То что нужно! Тоже думал о решении с ограничением через максимальную высоту, но не смог додумать)

Answer 2

[Сергей delphinpro]

ну может стоит использовать grid-auto-rows: 20px; вместо grid-template-rows?

Comments

[VegasChickiChicki]

Сергей delphinpro Мне необходимо выстраивать блоки в колонки по 12 элементов, такой вариант не подходит.