Как уменьшить высоту grid-template-rows?

Question

[godsplane]

Просто мне нужно сделать их немного меньше по высоте, видно что есть свободное место под первым блоком, в таком случае почему они не ужимаются?
https://codepen.io/poylar/pen/zYPKMgg

Comments

[ambisinister One]

grid-gap

[Ankhena]

Сейчас там нет ничего кроме паддинга.
В прошлой версии вы сами задали строкам равную высоту.

[godsplane]

Ankhena, https://codepen.io/poylar/pen/zYPKMgg так поняне будет наверное.

Суть в том что я не понимаю как работтает высота строк, почему если я увеличу 4 блок на одну строку, то у меня остальные подожмуться как надо, но тогда 4 блок будет вылезать за границы

[Ankhena]

godsplane, потому что 2 и 3 уменьшились на величину gap.

Вам достаточно сделать грид в 2 строки: min-content 1fr и первому итему задать span 2

[godsplane]

Ankhena, получилось, спасибо, но я так особо и не понял в чем суть.Я думал чем больше строк тем большее разнообразие в высоте/ширине элементов,пооэтому у меня 12 колонок, это норм практика или нет?

[Ankhena]

godsplane, суть в значениях размеров для строк.
В большинстве случаев, их вообще не требуется задавать при верстке сайтов.
Исключение обычно связано с вписыванием в 100vh (или другую ограниченную высоту). Или с получением строк одинаковой высоты.

пооэтому у меня 12 колонок, это норм практика или нет?

Как вам удобнее.
Если у меня два дочерних блока, то я не вижу смысл задавать 12 колонок и потом ещё каждому дочернему дописывать, чтобы занял 6. Вместо одной фразы 1fr 1fr.
Если они неравной ширины, то я тоже напишу что-то вроде 5fr 7fr
Но я вообще ленива и не люблю писать лишнего.

Так что, как всегда: "по обстоятельствам и в зависимости от задачи"