CSS как расположить блоки дугой?

Question

[Диман Суворкин]

Есть пример на codepen
Здесь я расположил блоки в виде дуги. Количество блоков может варьироваться от 4 до 7-8. Но не могу понять, как сделать так, чтобы при слишком маленьком размере окна (когда блокам не хватает места и они становятся в несколько рядов) убрать отступы сверху. Причем сброс отступов в медиа-запросах не подходит, так как при разном количестве блоков ширина окна, при которой верстка плывет, разная. Как это реализовать?

Comments

[Диман Суворкин]

VicTHOR, Количество блоков варьируется вместе с мыслями администратора сайта и контент-менеджера (эти блоки хранятся в базе данных и изменяются в админке).

[Ярослав Иванов]

VicTHOR, блоки варьировались варьировались да не вывоварьировались

[Диман Суворкин]

Ярослав Иванов, а если серьёзно?

[Ярослав Иванов]

Диман Суворкин, картинку нарисуй как сейчас и как надо.

[Диман Суворкин]

Ярослав Иванов, сейчас на маленьких экранах:


Надо:

Желательно делать так когда эти блоки начнут переходить на следующую строку. Конечно, можно выставить брекпоинт с фиксированной шириной (предположим, 1200px) для любого количества блоков. А вот как только начнут съезжать на следующую строку - так вообще можно?

[Ярослав Иванов]

Диман Суворкин, ну убрать марджины и все)

[Ярослав Иванов]

Диман Суворкин, ну или на js делать расчёты если не известно сколько блоков будет

[Диман Суворкин]

Ярослав Иванов, Понял, то есть никак или костылить) Тогда плевать, до 1200 px убрать отступы будет проще всего

Answer 1

[Борис Шепелев]

Все правильно работает. Тут LESS.

@media screen and (max-width: 800px) {
  .child:nth-of-type(4),
  .child:nth-last-child(4){
    margin-top: 0px;
  } 
    
}

вот в конце вашего примера добавил и при размере 800 все нормально. Т.е. блок 4 слева и блок 4 справа прижимается к верхушке экрана.