Можно ли сделать автоматическое расположение блоков в плитке?

Question

[Александр]

Добрый день.
Нарисовал для сайта вот такую плитку



Цикл блока - 14 блоков. Вторые семь блоков - зеркальное отображение первых семи.

При верстке столкнулся с проблемой размещение данных блоков. Пытался вывести формулу, чтобы в зависимости от их положение в дереве элементов, автоматически задавать им положение, ширину, высоту, но не вышло.
Загвоздка в формуле именно для последующих 7 элементов (которые в зеркальном отображении).

Еще одна особенность - структура всего блока такая

<div class="block_wrap">
<div class="block_item"></div>
<div class="block_item"></div>
<div class="block_item"></div>
...
<div class="block_item"></div>
</div>

То есть разбивать всю структуру плитки на части нельзя.

Сейчас вручную приходится задавать позицию, ширину, высоту с помощью псевдокласса :nth-child.

Можно ли тут вывести какую либо формулу, чтобы все это автоматом задавалось?
Или лучше отказать от такой реализации и перерисовать?

Answer 1

[iBird Rose]

https://masonry.desandro.com/layout.html

Comments

[Александр]

В любом случае, будет нужна формула, которая бы добавляла классы для мансори, так как блоки выводятся циклом.

[iBird Rose]

Александр, ну если ты при выводе не умеешь классы добавлять, то сочувствую.

[Егор Живагин]

Александр, ставь класс в зависимости от индекса элемента в цикле

[Александр]

Егор Живагин, это я понимаю, но в итоге придется самому считать номер элемента и его обрабатывать?

[Егор Живагин]

Александр, ну да. Если нельзя менять структуру - только так

[Александр]

Егор Живагин, спасибо.

[Ankhena]

Александр, nth-child тоже никто не отменял

[Александр]

Ankhena, nth-child с указанием конкретного элемента?

.block_item:nth-child(9){
}

Сейчас так и реализовано.

[Ankhena]

Александр,

nth-child с указанием конкретного элемента?

Через n разумеется.

Сейчас так и реализовано.

Ну извините, с телепатией проблемы

Answer 2

[Егор Живагин]

Почему нельзя разбить структуру?

У тебя есть три типа блоков, насколько я вижу. Задай каждому типу свой класс, его и стилизуй.
Или flex, но нужны будут доп. обёртки

Answer 3

[mrSeller]

Без JS не обойтись никак.
Либо сам пиши код, либо используй библиотеку, которуб предложил iBird Rose