---
title: "Rebuilding FIFA Standings Layout with CSS Subgrid"
url: https://daily.dev/posts/rebuilding-fifa-standings-layout-with-css-subgrid-didqlh9rj
source_url: https://ishadeed.com/article/fifa-layout
type: article
source: "Ahmad Shadeed"
published: 2026-07-19T13:50:29.755Z
updated: 2026-07-20T02:17:30.096Z
tags: ["css", "ui-design"]
reading_time: 8
upvotes: 62
comments: 9
language: en
---

> ## Documentation Index
> Fetch the complete documentation index at: https://daily.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Rebuilding FIFA Standings Layout with CSS Subgrid

**[Ahmad Shadeed](https://daily.dev/sources/ishadeed)** · 8 min read · 62 upvotes · 9 comments

## Summary

A deep dive into rebuilding the FIFA World Cup standings bracket layout using CSS Grid and Subgrid. The author inspects the original FIFA website's markup, critiques its hacky approach of splitting related elements into separate DOM nodes to mirror the visual design, then proposes a semantically cleaner alternative. The solution uses a parent grid with 8 columns and 4 rows, then applies `grid-template-columns: subgrid` and `grid-template-rows: subgrid` on nested round elements so that start and end match columns can be positioned at opposite ends of the shared grid. Flexbox is used within each column to distribute match items equally for proper vertical centering and connector alignment. Responsive behavior is also covered, collapsing the layout to a single-column flow on smaller screens.

## Full article

daily.dev links to this article rather than hosting it. Read it at the original source: <https://ishadeed.com/article/fifa-layout>

## Community discussion

Top comments from developers on daily.dev.

**@rucaua** · 0 upvotes

> With billions in revenue, FIFA has no excuse for such terrible UX/UI. They desperately need to hire better app designers.
>
> My respect to Author!!!

**@dome68** · 0 upvotes

> Explanation really helpful, thanks.

**@easyrilwan** · 0 upvotes

> Very insightful and helpful. I'll love for you to complete the article and cover the animation aspect too.
> Thank you big time.

**@lauramoss** · 0 upvotes

> One of the clearest CSS layout articles I've read in a while. The step-by-step explanation and interactive examples made a tricky concept feel surprisingly approachable. 👏

**@kevinfrom** · 0 upvotes

> Great demo! Really shows the power of CSS grid and subgrids.

## Similar posts on daily.dev

- [Issue \#751: Rebuilding the World Cup table with CSS Subgrid — Frontend Focus](https://daily.dev/posts/issue-751-rebuilding-the-world-cup-table-with-css-subgrid-frontend-focus-vp4xscjsn) · Frontend Focus · 3 upvotes · 0 comments
- [Subgrid: how to line up elements to your heart’s content](https://daily.dev/posts/subgrid-how-to-line-up-elements-to-your-heart-s-content-6jsfhetqe) · WebKit · 0 upvotes · 0 comments
- [CSS Subgrid](https://daily.dev/posts/css-subgrid-tzegbceau) · Flavio Copes · 1 upvotes · 0 comments

---

Tags: [#css](https://daily.dev/tags/css), [#ui-design](https://daily.dev/tags/ui-design)

[View this post on daily.dev](https://daily.dev/posts/rebuilding-fifa-standings-layout-with-css-subgrid-didqlh9rj)