Как правильно сверстать блоки в таком порядке?

Question

[Александр]

Приветствую!
Подскажите, весь мозг сломал.

Имеется 9 блоков. Они должны иметь порядок как на скрине.
Высота блоков в каждой строке должна быть одинаковая (и зависеть от контента). Сейчас на скрине высота одинаковая у всех блоков.

На мобильных устройствах (допустим media{max-width:400px} ) все блоки должны идти друг за другом, в одну колонку.

Я так понимаю, оптимально использовать Grid, но у меня не хватает опыта в них :)

Comments

[Максим]

grid как раз таки и рано применять .... он поддерживается только самыми современными браузерами ...

Answer 1

[Lam Besis]

У меня получилось решить эту задачу через гриды: линк на codepen. По высоте выстраивается, порядок соблюдается, на мобилке превращаются в обычную колонку.
На счет поддержки браузерами - гриды давно вошли в спецификацию, простейшие функции поддерживаются уже в 87% браузеров.

Comments

[Александр]

Огромное спасибо!

[HelpSophie]

Lam Besis А если добавится неизвестное количество блоков?

Answer 2

[Andrew]

Пилите эти 9 блоков и в css ставите order
Для декстопа ставите им ширину 32%, в мобилке - 100%.