Турнирная сетка на CSS Subgrid. Мастер-класс от Ахмада Шадида ⚽️
Ахмад Шадид показывает, как строить турнирную сетку на CSS Subgrid с выравниванием матчей и соединительными линиями.
В чём главная проблема таких сеток?
С каждым раундом (1/8, 1/4, полуфинал, финал) количество матчей уменьшается в два раза, а вертикальный интервал между ними увеличивается. При этом карточки команд следующего раунда должны быть строго выровнены по центру относительно пары матчей из предыдущего.
Как это решает Subgrid
- Единый контейнер-источник истины: На родительский элемент вешается
display: gridс фиксированным количеством строк на весь турнир (например, 16 строк для 1/8 финала). - Проброс сетки внутрь: Каждый раунд и отдельный карточка-матч становятся дочерними сетками с
grid-template-rows: subgrid. - Нативное выравнивание: Карточка 1/4 финала просто занимает
grid-row: span 4, а браузер автоматически центрирует её содержимое ровно посередине этих четырёх строк. Никакогоmargin-topна глаз или вычислений на JS! - Соединительные линии: Соединяющие линии между раундами рисуются прямо через псевдоэлементы
::before/::afterи градиенты, привязанные к сетке, так что они идеально масштабируются при ресайзе.
В статье Ахмад детально разбирает построение компонентов, работу с grid-row и адаптируемость под мобилки с горизонтальным скроллом. Отличный туториал, чтобы наконец-то разобраться с subgrid на реальном продуктовом кейсе.