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

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

5a0ea061bb320569213412.png

Цикл блока - 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.

Можно ли тут вывести какую либо формулу, чтобы все это автоматом задавалось?
Или лучше отказать от такой реализации и перерисовать?
  • Вопрос задан
  • 320 просмотров
Пригласить эксперта
Ответы на вопрос 3
iiiBird
@iiiBird Куратор тега CSS
Пока ты спишь - твой конкурент совершенствуется
Krasnodar_etc
@Krasnodar_etc
little front
Почему нельзя разбить структуру?

У тебя есть три типа блоков, насколько я вижу. Задай каждому типу свой класс, его и стилизуй.
Или flex, но нужны будут доп. обёртки
Ответ написан
Комментировать
@mrSeller
Без JS не обойтись никак.
Либо сам пиши код, либо используй библиотеку, которуб предложил iBird Rose
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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