TGViewer
Точка входа в программирование Точка входа в программирование @prog_point · 18K subscribers
Post #5136 302

Forwarded from Веб-страница

Как собрать турнирную сетку FIFA на CSS Grid и subgrid

На странице FIFA каждый столбец раунда вынесен в отдельный элемент: разметка повторяет экран. В разборе макета показана другая структура: один элемент на раунд, внутри две группы матчей по сторонам.

Сетка получает восемь колонок и четыре строки. Вложенный раунд растягивается по ней и через subgrid наследует те же линии, поэтому группы можно поставить в первую и последнюю колонки без отдельных обёрток. Матчи по вертикали автор распределяет с помощью Flexbox: каждый занимает равную долю доступной высоты, и соединительные линии сходятся с центрами карточек.

Откройте этот разбор, когда дизайн требует симметричной схемы, а разметка начинает копировать каждую визуальную колонку. На планшете макет сохраняет структуру с горизонтальной прокруткой, на узком экране все раунды выстраиваются слева.
  • ❤ 2
More from @prog_point
  1. Sep 26, 2026Как подготовить репозиторий к пулреквестам от ИИ-агентов Если ведёте учебный open source-п…
  2. Sep 26, 2026Как тренировать интерфейсы с ИИ, не отдавая ему всю работу Возьмите небольшой экран и снач…
  3. Sep 26, 2026Как разделить результат программы и ошибки в Python Функция print() по умолчанию пишет в с…
  4. Sep 22, 2026Как искать по отсортированному списку с bisect В отсортированном списке не обязательно пер…
  5. Sep 22, 2026Как добавить динамику на статический сайт без своего сервера Статический сайт может получа…
  6. Sep 22, 2026Когда в Python действительно нужен класс Класс не обязателен для каждой программы. Он приг…
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →