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

Question

[Владислав Старцев]

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


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

Есть такой вариант:

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

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

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

P.S.: Делаю на Drupal'е

Answer 1

[DTX]

flexbox с двумя колонками. У широких новостей flex-grow:1, у мелких - 0

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

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

А вот и пример :)
codepen.io/DTX/full/qNOdRx
(сверху слева кнопка - Add News)

Comments

[Владислав Старцев]

Спасибо, это пока лучшее решение, для моей задачи)) вообще про Flexbox не знал, полезная вещь)

[Илья Морунов]

Владислав Старцев: да, удобно с ним, НО если делаете кроссбраузерную верстку, то будут проблемы с всеми любимым IE и сафари.

[DTX]

Илья Морунов: сафари то за что?)
caniuse.com/#feat=flexbox

[Илья Морунов]

DTX: Да, новые версии возможно корректно отображают. Я тестирую в 5.1... Т.к. не смог в своё время разобраться с обновление данного браузера)). А теперь представьте, сколько таких как я? :) Сколько пользователей используют старую версию браузера?
А проблемы с которыми сталкивался я - ужасны. Например: flex блоки не переносятся на новую строку и выстраиваются в одну линию по горизонтали.

[DTX]

Илья Морунов: browser usage: 0.00% :)
safari 6.1: 0.02%

Answer 2

[Just_Andrew]

Возможно это - ссылка

Comments

[Владислав Старцев]

Спасибо, полезная штука, но тут решил использовать Flexbox

Answer 3

[Sanes]

getuikit.com/docs/grid-js.html

Comments

[Владислав Старцев]

Спасибо, тоже полезный скрипт)

Answer 4

[Alexey ZloDeeV]

Либо, как ты сказал, две колонки по 50% ширины и уже внутри разбивать на "большой"/"маленький" пост, либо копать в сторону masonry.
Ну и в качестве сумасшествия попробовать на флексах организовать, что-то вроде такого https://jsfiddle.net/apjkw6n3/, но пострадает порядок и часть универсальности решения по отношению к masonry

Answer 5

[novrm]

Это разметка, в которой блоки стоят один за другим и обладают стилем:

ul li {
...
    display: inline-block;
...}

Comments

[Владислав Старцев]

что-то не идут инлайны, пример codepen.io/esvlad/pen/aZvvjr

Answer 6

[Александр Решетняк]

также подойдёт динамичная сетка packery.metafizzy.co на js, в которой много интересных решений

Answer 7

[Алексей]

в bootstrap есть много подобных решений