@esvlad
Веб-разработчик

Встречали ли вы такую сетку/расположение блоков?

Делаю проект, по дизайну у блока новостей следующая сетка:
2ce4ec6367d8489f867861c4f23562f6.jpg

Если кто с похожим сталкивался, поделитесь опытом или мыслями как лучше реализовать.

Есть такой вариант:
2f73d812bffd4f0b8066afeff8794ea8.JPG
Выводить все новости, а потом js-скриптом перестраивать сетку, но при большом количестве новостей, боюсь пока всё прогрузится и перестроится, пользователь уже покинет раздел.

И есть мысль, сделать 2 колонки, слева и справа, и с помощью php дописывать стили, первая новость слева большая, вторая-третья справа мелкие, четвертая-пятая слева мелкие, шестая справа большая, и так каждые шесть повторять.

Но всё же, может есть вариант по проще?

P.S.: Делаю на Drupal'е
  • Вопрос задан
  • 1448 просмотров
Решения вопроса 3
DirecTwiX
@DirecTwiX
"display: flex;" уже предлагали?
flexbox с двумя колонками. У широких новостей flex-grow:1, у мелких - 0

И начинаешь заполнять
.grow1
.grow0
.grow0
.grow1
.grow0
.grow0

Будет большая, две маленьких, большая и снова две маленьких

А вот и пример :)
codepen.io/DTX/full/qNOdRx
(сверху слева кнопка - Add News)
Ответ написан
@Just_Andrew
Возможно это - ссылка
Ответ написан
Пригласить эксперта
Ответы на вопрос 4
ZloDeeV
@ZloDeeV
Верстаю в своё удовольствие
Либо, как ты сказал, две колонки по 50% ширины и уже внутри разбивать на "большой"/"маленький" пост, либо копать в сторону masonry.
Ну и в качестве сумасшествия попробовать на флексах организовать, что-то вроде такого https://jsfiddle.net/apjkw6n3/, но пострадает порядок и часть универсальности решения по отношению к masonry
Ответ написан
Комментировать
@novrm
Это разметка, в которой блоки стоят один за другим и обладают стилем:
ul li {
...
    display: inline-block;
...}
Ответ написан
Vampireos
@Vampireos
https://vk.com/axelaredz
также подойдёт динамичная сетка packery.metafizzy.co на js, в которой много интересных решений
Ответ написан
Комментировать
@alegrans
в bootstrap есть много подобных решений
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы