Как на css grid раскидать определенные элементы по колонкам?

Question

[maxhd]

Подскажите пожалуйста как сверстать подобное как на картинке. Суть в том что мне нужно чтобы rows были динамической высоты т.е. вели себя как список.

<div class="gird">
	<div class="item item--1">item 1</div>
	<div class="item item--2">item 2</div>
	<div class="item item--3">item 3</div>
	<div class="item item--4">item 4</div>
	<div class="item item--5">item 5</div>
	<div class="item item--6">item 6</div>
	<div class="description">Lorem ipsum dolor sit</div>
</div>

Comments

[Rustam Bainazarov]

Grid и чистый CSS вам нормально такое отображение не сделает.

Это называется Masonry Layout. Ищите любой JS плагин для этой цели и используйте его. Например, https://github.com/desandro/colcade

[maxhd]

Рустам Байназаров, Спасибо за комментарий, но у меня проблема в том, что нужно определенные элементы ложить в определенные колонки

[Rustam Bainazarov]

maxhd, ну тем более не к CSS вопрос, вы этого в вопросе не указали. Удачи с написанием JS-функционала распределения по колонкам в зависимости от заданных условий. Можете сделать надстройку того плагина, взять его за основу.

[maxhd]

Рустам Байназаров, ок, все равно спасибо, мне не критично внести в разметку колонки, просто интересно было узнать возможно ли это сделать

Answer 1

[khomaldi]

Простите, рыбы нет, но есть удочка. А если можете понимать видео на английском, то вот вам удочка два :)

Успехов!

Comments

[maxhd]

Спасибо) курс cssgrid.io крутой