Реконструкция сетки FIFA на CSS Subgrid: чистый DOM и адаптивная вёрстка
При проектировании сложных многоколоночных макетов веб-разработчики постоянно сталкиваются с тяжелым компромиссом: либо жертвовать семантической чистотой HTML-разметки ради удобства визуального выравнивания блоков, либо плодить глубокие вложенные обертки DOM. Ярким наглядным примером этой инженерной проблемы выступает официальная турнирная сетка чемпионата мира на сайте FIFA.
В исходной реализации макета сайта FIFA разметка турнирной таблицы разрывалась на две отдельные визуальные группы: левую часть сетки и правую часть сетки. Чтобы визуально отобразить раунды соревнований с финалом по центру, разработчикам пришлось продублировать HTML-структуру этапов и разнести матчи одного и того же раунда по разным веткам дерева DOM. Инженер по дизайну Ахмад Шадид (Ahmad Shadeed) провел подробный рефакторинг этого макета, показав, как применение технологии CSS Subgrid позволяет построить семантичную разметку и адаптивный интерфейс.
Анализ проблемы и ограничений традиционной HTML-структуры
В традиционной верстке на базе базового модуля CSS Grid элементы, находящиеся внутри дочерних контейнеров, полностью изолированы от направляющих линий родительской сетки. Дочерний элемент формирует собственную независимую сетку, из-за чего выровнять элементы из разных контейнеров друг относительно друга становится крайне сложной задачей.
В случае турнирной таблицы FIFA логическая структура в HTML должна последовательно отражать этапы турнира: 1/8 финала, четвертьфинал, полуфинал и финал. Однако из-за стремления расположить финал в центре экрана, а предшествующие раунды по бокам, в оригинальном сайте разметка 1/8 финала оказалась разбита на два независящих блока. Это существенно затрудняет навигацию с помощью скринридеров и ассистивных технологий, а также требует громоздких скриптов при адаптации под мобильные экраны.
Построение базовой родительской сетки на 8 колонок
В обновленном архитектурном решении внешняя обертка турнирного дерева организуется как единый родительский контейнер CSS Grid, состоящий из 8 вертикальных колонок. Колонки точно соответствуют визуальным столбцам раундов: четыре столбца с левой стороны, центральный столбец финала и три столбца с правой стороны.
.bracket-wrapper {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 1.5rem;
align-items: center;
}
Благодаря такой организации каждый раунд турнира в HTML представляет собой естественный семантический список матчей. Все матчи 1/8 финала находятся в единой секции разметки, независимо от того, в какой части экрана они отрисовываются визуально.
Наследование направляющих линий через CSS Subgrid
Ключевым инструментом увязки карточек матчей с единым родительским макетом выступает свойство grid-template-columns: subgrid и grid-template-rows: subgrid. Технология подсеток (Subgrid) заставляет дочерний элемент использовать сетку своего родителя вместо создания собственного изолированного контекста форматирования.
Для раунда, охватывающего несколько колонок родителя, задаются следующие CSS-правила:
.round-section {
display: grid;
grid-template-columns: subgrid;
grid-template-rows: subgrid;
grid-column: span 8;
}
Благодаря этому дочерние карточки матчей выравниваются строго по колонкам и строкам родительской сетки. Наследование строк через grid-template-rows: subgrid гарантирует, что заголовки раундов, плашки со счетом и блоки с именами команд на всех этапах турнира выравниваются по единым горизонтальным базовым линиям без вычисления фиксированных пиксельных высот.
Симметричное выравнивание правого крыла сетки
Особый интерес в рефакторинге представляет выравнивание матчей правой половины турнирного дерева. Чтобы карточки правой стороны зеркально отражали левую часть и примыкали к соответствующим линиям финала, используется отсчет линий от правого края родительской сетки с помощью отрицательных индексов:
.round-right-side {
grid-column: 5 / -1;
}
.match-card-reverse {
grid-column: -2;
}
Значение grid-column: -2 указывает браузеру выравнивать элемент по предпоследней вертикальной линии родительской сетки. Это полностью исключает необходимость создавать специальные зеркальные классы в HTML или дублировать стили для левых и правых элементов.
Адаптивность под мобильные устройства и контейнерные выражения
На небольших экранах мобильных устройств 8-колоночный горизонтальный макет физически не помещается по ширине. В традиционной верстке это потребовало бы полной перестройки дерева DOM с помощью манипуляций JavaScript.
Благодаря использованию CSS Subgrid и контейнерных выражений (@container) адаптация под мобильные экраны выполняется исключительно средствами CSS. При уменьшении ширины экрана родительский контейнер переключается в одноколоночную или 4-колоночную последовательную структуру, где раунды выставляются друг за другом по вертикали:
@container (max-width: 768px) {
.bracket-wrapper {
grid-template-columns: 1fr;
}
.round-section {
grid-column: 1;
grid-template-columns: 1fr;
}
}
Карточки команд внутри каждого матча выравниваются через флекс-модель (display: flex), обеспечивая плавную подгонку названий команд и счетчиков голов под любую ширину экрана.
Безопасная поддержка и фолбэки для старых движков
Хотя спецификация CSS Subgrid поддерживается всеми современными браузерами, в продакшен-коде рекомендуется предусматривать безопасные фолбэки через директиву @supports. Для устаревших браузеров можно задать базовый Flexbox-макет:
@supports not (grid-template-columns: subgrid) {
.round-section {
display: flex;
flex-direction: column;
gap: 1rem;
}
}
Это предотвращает развал интерфейса у пользователей со старыми устройствами, одновременно предоставляя современным браузерам идеально выровненную сетку.
Практическая ценность для современной фронтенд-разработки
Реконструкция сетки FIFA на CSS Subgrid демонстрирует возможности современного CSS. Веб-разработчикам больше не нужно выбирать между семантической чистотой HTML и сложностью графического представления макета. Применение подсеток сокращает количество лишних тегов-оберток в разметке, уменьшает объем стилей, упрощает поддержку кода и обеспечивает естественную доступность интерфейсов для экранных дикторов. На сегодняшний день технология CSS Subgrid является одним из лучших инструментов для верстки сложных адаптивных интерфейсов.