CSS Grid. Как убрать «вертикальную растяжку» элементов в колонках?

Question

[GaserV]

Такая проблема. Нужно построить сетку таким образом, чтобы элементы в колонках не растягивались. Сейчас получается так, что если элемент в первой колонке имеет высоту скажем 200px а во второй 400, то и в первой он "растягивается" до 400px. Как сделать так, чтобы они не растягивались и всегда шли друг за другом?

Answer 1

[FabiBoom]

Элементу в первой колонке задать align-self: start;

P.S если нужно такое поведение для всех элементов задай контейнеру align-items: start;.

Comments

[GaserV]

наверное не корректно вопрос задал. Да, он после этого не будет растягиваться. Но следующий элемент не будет начинаться с конца предыдущего. А будет начинаться с конца самого длинного элемента во второй колонке. То есть если первый 200 второй 400 то у первого просто пустое место высотой в 200

[FabiBoom]

GaserV, я правильно понимаю, что вам нужен обычный "masonry layout"?

[GaserV]

FabiBoom, да, грубо говоря он и нужен, только с помощью css grid

[FabiBoom]

GaserV, думаю на чистом CSS Grid такого не добиться, ну если только не фиксировать размеры грид строк явно и потом размещать элементы с помощью grid-column/grid-row, для динамичного содержимого можно реализировать с помощью CSS Grid + JS (на самом деле простого кусочка JS) и в сети куча примеров.

Answer 2

[Re__disco]

Есть 1 вариант, допустим, что у нас 2 колонки, слева картинка, которая занимает большую высоту, а справа title description и button, мы хотим, чтобы все 3 элемента встали справа от картинки. Нужно задать grid template rows : 1px auto , потом первому элементу из правой колонки ставим grid row 1/3, ну и grid column всем указать нужный (Картинке 1/2, а всем остальным 2/3) и все, остальные элементы должны встать под него и будет все ровно, есть минус, что title нельзя будет дважды вставить, ну это и не нужно будет в 100% случаях, а при наполнении контентом все четко. Понимаю, что уже поздно, но может, кому то пригодится.