Можно ли сделать такую сетку?

Question

[Владислав Чернушевич]

Можно ли средствами только CSS, без таблиц и js сделать вот такую сетку, с учетом того, что структура HTML такая

<div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
</div>

?

Answer 1

[Назар Мокринский]

Да, можно с display: flex; flex-direction: column;, если HTML менять нельзя - то order: x поможет изменить порядок элементов по вашему желанию.

Comments

[Eduards Vigulis]

В IE9 работать не будет =D

[Назар Мокринский]

Eduards Vigulis: Кого-то интересует IE9? MS IE10 с нового года перестает поддерживать.
Под каждым ответом найдется человек, который вместо использования современных подходящих инструментов посоветует использовать что-то вроде float, стреляя себе в ногу, голову, и ещё несколько мест одновременно для поддержки инвалида IE. IE должен умереть. Он уже умирает, помогите ему не мучиться долго. Спасибо.

[Сергей Протько]

Eduards Vigulis: да плевать на IE9 уже.

[Сергей Протько]

Назар Мокринский: вот только с flex-direction: colum такое сделать не выйдет. Во всяком случае я сходу не могу придумать как это можно сделать таким образом. Ладно еще row + flex-wrap но и то будет не совсем такой результат так как последний ряд растянется.

[Назар Мокринский]

Сергей Протько: Я исхожу из того, что количество элементов фиксировано. Если не фиксировано - тогда можно использовать горизонтальный вариант с отрицательным нижним отступом в фиолетовых блоках и положительным для блока возле его левого нижнего угла.

[Eduards Vigulis]

Смайлик в конце как бы намекает на то что это была шутка. На самом деле я никогда не использовал flexbox'ы, поэтому забыл про них.
Я не гуру фронтенда и если бы мне поставили такую задачу я бы смотрел в сторону Masonry т.к. не могу представить себе проект где нельзя использовать JS, можете привести хоть один такой пример?

[Назар Мокринский]

Eduards Vigulis: Тут не в JS проблема, я тоже подумал о masonry, но не вижу смысла использовать JS для того, что делается с помощью CSS. Особенно неудобно использовать JS для таких целей когда блоки могут динамически добавляться/удаляться, когда блоки находятся внутри Shadow DOM и прочие ситуации, где CSS просто работает.

[Владислав Чернушевич]

Нумерация блоков должна быть такой
https://yadi.sk/d/Mc-XqYFJjibGQ

[Назар Мокринский]

Владислав Чернушевич: Тогда либо вручную переставлять блоки (что при неопределённом количестве невозможно, а при достаточно большом для поддерживаемости потребует LESS/SCSS миксин), либо горизонтальный вариант делать как я выше писал.

[Владислав Чернушевич]

LESS-миксин подойдет. Куда копать не подскажете?

[Назар Мокринский]

Владислав Чернушевич: Тогда вам нужно в цикле генерировать значение параметра order.
На вход подаете количество колонок и строк, потом что-то вроде такого (псевдокод, не использую LESS):

for column = 0; column < columns; ++column
    for row = 0; row < rows; ++row
        &:nth-child(column*row) {
            order: хитрая формула;
        }

Хитрая формула должна перевести индексы таблицы из горизонтального списка в вертикальный, то есть:
0 3 6
1 4 7
2 5 8
Должно стать:
0 1 2
3 4 5
6 7 8
Дополнительно для двух блоков делаете двойную высоту и >: flex; flex-direction: column; разложит их как на рисунке (именно из-за колонок вам и нужно переопределить порядок блоков в стиле, чтобы они опять стали строками.
В общем, будет весело)
Рекомендую попробовать сначала горизонтальный вариант с отрацательными + положительными отступами, описанный выше.

Answer 2

[Eduards Vigulis]

Если блоки и шаблон фиксированной ширины то можно сделать на float'ах, если верстка резиновая то придется помучится, скорее всего это вылезет в пару десятков media query правил.

Answer 3

[Александр Таратин]

w3bits.com/css-masonry

Comments

[Владислав Чернушевич]

Немного не то. Нумерация блоков такая должна быть https://yadi.sk/d/Mc-XqYFJjibGQ