Как сделать расположение списка элементов ёлочкой?

Question

[Кирилл Резанов]

Всем привет, верстаю тут лендинг и возник вопрос, как сверстать такой список?

Или только как-то на группы делить их что-ли...

Answer 1

[Сергей delphinpro]

Автоматического расположения так не добиться. проще всего разбивать на группы с центрированием.
В частном случае можно поизвращаться.

Comments

[Кирилл Резанов]

Спасибо за ответ.

Answer 2

[Михаил Р.]

Пример сетки, оформлять не стал:

Comments

[Кирилл Резанов]

Спасибо.

Answer 3

[Кирилл Резанов]

В общем, пришёл к такому решению.

Comments

[Сергей delphinpro]

Уберите айдишники, если они вам вот прямо очень-очень не нужны (а они здесь не нужны), замените на классы.
Не используйте классы city_row_1/city_row_2. Такие имена ни о чем не говорят. Назовите их city_row_default_size/city_row_big_size
Отступы через отрицательные марджины тоже не актуальны. Используйте flex и gap. Это избавит вас от дочерних селекторов и как следствие от излишней специфичности.

[Кирилл Резанов]

Сергей delphinpro, Да, я изначально не подумал об этом. Надо чуть переделать
Когда я делал, я думал, что у третьей строки размер шрифта ещё меньше, а он совпадает со второй строкой