На чём сверстать?

Question

[Breeze1]

такую сетку можно сделать на css grid ? Пока ещё не приступал к изучению этой технологии. По некоторым причинам masonry нельзя использовать, по-этому ищу альтернативные пути. Если можно, то приступлю к освоение )

клик

Comments

[Rustam Bainazarov]

Это какая такая причина позволяет использовать grid, но не позволяет использовать простейший masonry-скрипт?

[Breeze1]

Рустам Байназаров, какая разница ? Вопрос был в другом

[Rustam Bainazarov]

Breeze1, ну grid или inline-block, но и они уступают по гибкости любому masonry в данном случае.

[Breeze1]

на инлайн блоках такую сетку не построишь ) При условии, что все элементы будут в одном wrapper, разделять на колонки нельзя

[Rustam Bainazarov]

Breeze1, построишь (ну и columns):

[Ярослав Иванов]

Breeze1, ты че такой дерзкий. С какого района?

[Breeze1]

Ярослав Иванов, с центрального :) Извиняюсь, тяжелый день )

[Breeze1]

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

[Ярослав Иванов]

Breeze1, я бы две колонки сделал и на инлайн блоках

[Breeze1]

Ярослав Иванов, та проблема потом как back-end будет отзывы в две колонки распихивать ?)

[Rustam Bainazarov]

Breeze1, такой ответ, как я вижу, уже есть, лучше его отметьте. Но у columns есть проблемы с тенями в целом с тем, что выходит за пределы колонок в месте разрезки, поэтому я не использую их, а использую JS.

[Ярослав Иванов]

Breeze1, тогда mansory так как grid не работает в старых браузерах)

[Breeze1]

Ярослав Иванов, да мне не нужны старые браузера, в этом проекте можно и на css grid сделать, главное чтобы работало.

[Rustam Bainazarov]

Breeze1, grid для masonry полноценно не подходит тоже, есть свои нюансы:
https://css-tricks.com/piecing-together-approaches...

[Breeze1]

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

Answer 1

[Рома Зварич]

Возможно, не самым известным, но очень уместным в данном случае способом может быть "CSS Columns".
Как раз, колонки с переносом не помещающегося содержимого в новую колонку, если это предусмотрено разработчиком

Подробнее здесь: https://html5book.ru/css3-columns/

Comments

[Rustam Bainazarov]

В качестве иллюстрации: