Как такое наверстать (сетка brackets)?

Question

[Александр Осадчий]

Здравствуйте!

Может есть у кого в заметках?..или конструктор какой-нибудь

Нужна именно такая структура сетки

P.S Вот такое видел - но не то...не подходит архитектура(

Comments

[Alexey Levicky]

Как правило такие вещи делаются через Canvas, можно кончено и через html елементы с абсолютным позиционированием

[Alexey Levicky]

вот пример на codepen, за качество исполнения ручаться не буду)) но, думаю, если рефакторинг сделать то вполне нормально получиться
https://codepen.io/to_Matthew/pen/zNNjmW

[IIIu6ko]

Это просто 6 списков. Последние 4 со смещением просто(минусовой margin например)
Плюс можно к это делу прикрутить swiper для адаптивности или для сетки с кучей кругов.

[IIIu6ko]

По той сетке, который вы видели
Архитектура аналогичная, просто начиная со второго круга нужно добавить margin между командами и опять же смещение начиная с четвертого.

Answer 1

[Александр]

Как вариант. Не придумал, как лучше соединять линии.