Как сверстать такой блок?

Question

[Айнур Ярулин]

Здравствуйте, вообщем сижу не могу придумать как сверстать блок с таким простеньким расположением
элементов, суть в том, что эти человечки рендерятся джаваскриптом.

Как лучше сделать?
1. Создать блок слева и справа и в каждый рендерить по 3 человека отдельно
2. Зарендерить всех в один блок и как-то стилями расположить их?

Comments

[Вадим]

Лучше проходить вступительные в Яндекс Школу самостоятельно :-)

[Айнур Ярулин]

Вадим, больше такое не повторится)

[Олег]

Вадим, кхм, так курсы там платные, если учишься, то зачем же искать решения на стороне? ))) оно же ? https://sections.yandex.ru/?utm_source=school

[Вадим]

Олег, нет, оно: https://academy.yandex.ru/schools/frontend

Answer 1

[Айнур Ярулин]

Вообщем решил, что проще всё зарендерить в один блок и стилизовать,
решил использовать grid, как раз улучшил знания.

Я сделал так, может эксперты посмотрят и скажут, вдруг можно проще
https://codepen.io/squadcoder/pen/abBwLZJ?editors=1100

Answer 2

[Олег]

у вас 5 колонок
в первой и пятой только 1 фотка
во вторую и четвёртую два по 2 фотки в колонну
в третьей две кнопки в колонку

а фотки рендерить внутрь уже выровненных по-вертикали div

Comments

[Айнур Ярулин]

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

[Олег]

squadbrodyaga, на вкус и цвет фломастеры разные. Их можно вообще отрендерить в скрытый блок. А оттуда раскидать дополнительным скриптом по нужным блокам - ну это если функцию рендеринга изменять нельзя.

[Олег]

squadbrodyaga, ладно, успехов.

Answer 3

[galyamov_marat]

В один блок и расположить стилями! Только так! И под мобильные устройства будет легче настроить

Comments

[Айнур Ярулин]

я сейчас так и делаю, пытаюсь использовать гриды, не вижу пока других способов