Как сделать нестандартную сетку на гридах?

Question

[Сергей Бурдужа]

Есть такой блок в тестовом макете.


Как вставить блоки различной высоты с помощью гридов?
Просто еще не приходилось верстать такую сетку.

Заранее благодарен.

Answer 1

[Антон]

Родителю

-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;

Элементу
page-break-inside: avoid;

Comments

[Сергей Бурдужа]

Спасибо, получилось.
Только нужно уточнить, чтобы у детей было display: inline-block;

Вот результат


И еще вопрос.
Вот из результат видно, что некрасиво получилось. То есть, самому нужно рассчитывать высоту элементов, чтобы они поместились в родителе без выступов.

[Антон]

Сергей Бурдужа, Ну вы же пытаетесь впихнуть невпихуемое, а как родителю реагировать на это? Правильно - растягиваться под нужды детей.
Как вы сами будете расчитывать высоту, если у вас заранее неизвестные размеры блоков, например?
Можете ограничить родителя по высоте, повесить скролл, или же, написать JS'ку, которая будет отслеживать выход за заданные границы блока и делать соответствующие правки в итемах, дабы ужать их...

[Сергей Бурдужа]

Антон, спасибо, я понял.

[Антон]

Сергей Бурдужа, и про supports подумайте, т.к., не помню я, что там сейчас до сих пор эти колоночные свойства не поддерживает, но лишним явно не будет, чтобы все не поломалось к чертям собачьим, посему, рекомендую такую структуру

.parent { 
	display: flex;
	flex-wrap: wrap;
}
@supports (column-count: 3) or
          (-moz-column-count: 3) or
          (-webkit-column-count: 3) {
			.parent {
				-webkit-column-count: 3; 
				-moz-column-count: 3; 
				column-count: 3;
				display: block;
				flex-wrap: unset;
			}
}
.item {
       width: 33.33%;
}
@supports (column-count: 3) or
          (-moz-column-count: 3) or
          (-webkit-column-count: 3) {
			.item {
				display: inline-block; 
                                page-break-inside: avoid;
				width: 100%;
			}
}

[Сергей Бурдужа]

Антон, Спасибо.

[Сергей delphinpro]

Антон, нафига здесь support? Вы таблицу поддержки посмотрите. Этим вы не улучшаете код. Наоборот, оставляете за бортом IE, который прекрасно работает с колонками, но не знает о саппорте.

[Антон]

Сергей delphinpro, добро, ставим колонки как основное, а далее проверяем

[Ejex Xeffer]

Это просто чудо.@Eridani, ты какой то бог. Идеальное решение того, чего я хотел добиться.

Answer 2

[eternalfire]

привет! тут поможет вот это
https://masonry.desandro.com/

Comments

[Сергей Бурдужа]

спасибо, вы спасли мою жизнь))

[keeplod]

Сергей Бурдужа, Вы серьезно решили заделывать это скриптами?

[Сергей Бурдужа]

keeplod, А у вас есть другой вариант?

[Сергей delphinpro]

keeplod, такая раскладка на сегодняшний день делается только скриптами. И предложенный — практически единственная адекватная альтернатива. А вы как делаете?

[keeplod]

Сергей delphinpro, как насчет такого? https://codepen.io/keeplod/pen/VNXPJB

[Сергей delphinpro]

keeplod, когда речь идет о кирпичиках, чаще всего нужно, чтобы блоки шли в одном потоке. Если их коло-во фиксированно и не меняется, то такой варик сойдёт.

[keeplod]

Сергей delphinpro, Спасибо)

Answer 3

[Сергей Тряпкин]

По вашему шаблону, идеально подходит вот это:
https://getbootstrap.com/docs/4.2/components/card/...

Comments

[Сергей Бурдужа]

Спасибо.
Только я не использую бутстрап в проетке.
А так да, тоже хорошее решение.

[Сергей Тряпкин]

Сергей Бурдужа, оффтоп вопрос. Почему?)

[Сергей Бурдужа]

Сергей Тряпкин, что почему, бутстрап не использую.
Потому что есть флексы и гриды, и мне с головой хватает.
По-моему субъективному мнению, эра бутстрапа уже прошла.
На нем можно сделать какие-нибудь тестовые сайты или прототипы.

Answer 4

[keeplod]

height:auto;

Comments

[Сергей Бурдужа]

Что, height: auto? Разве не гридах там такое значение по-умолчанию?
Можно просто пример?

[keeplod]

Сергей Бурдужа, я только учусь, возможно я не прав. Но вот я например так накидал все как по примеру.
https://codepen.io/keeplod/pen/VNXPJB про гриды только сейчас заметил =Ъ, но и без них хорошо получилось)

[Сергей Бурдужа]

keeplod, спасибо.