--- title: Rebuilding FIFA Standings Layout with CSS Subgrid description: 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,... canonical: https://daily.dev/posts/rebuilding-fifa-standings-layout-with-css-subgrid-didqlh9rj twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Rebuilding FIFA Standings Layout with CSS Subgrid | daily.dev og:description: 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,... og:url: https://daily.dev/posts/rebuilding-fifa-standings-layout-with-css-subgrid-didqlh9rj og:image: https://api.daily.dev/og/posts/DiDQlh9Rj.png og:image:alt: Rebuilding FIFA Standings Layout with CSS Subgrid og:image:width: 1200 og:image:height: 630 og:locale: 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: ## Questions this post answers ### How do I use CSS subgrid to nest a grid inside a grid item and inherit the parent's tracks? Set display: grid along with grid-template-columns: subgrid and grid-template-rows: subgrid on the child element after positioning it within the parent grid using grid-column and grid-row. This makes the child inherit the exact column and row tracks of the parent grid, allowing nested items like start and end markers to align precisely with the shared grid lines rather than creating a new independent grid. _See more grid and subgrid layout breakdowns on daily.dev when tackling tricky bracket or hierarchy designs._ ### How can I center flex or grid items so they align across differently nested containers, like matches in a tournament bracket? Apply display: flex with flex-direction: column on the wrapping containers, then set flex: 1 on each inner item (like a match) so it takes equal available space along its siblings, and use justify-content: center within each item. This distributes space evenly so the visual center of each item lines up correctly, which plain align-items: center on the parent fails to achieve when nested containers have differing content heights. _Developers refining alignment quirks like this often bookmark layout deep dives on daily.dev._ ## 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 - [CSS Subgrid](https://daily.dev/posts/css-subgrid-tzegbceau) · Flavio Copes · 4 upvotes · 0 comments - [Pure CSS Tabs With Details, Grid, and Subgrid](https://daily.dev/posts/pure-css-tabs-with-details-grid-and-subgrid-poex3iyse) · CSS-Tricks · 23 upvotes · 0 comments - [My CSS layout strategy](https://daily.dev/posts/my-css-layout-strategy-lfp48ynra) · Blogging and all that Malarkey · 49 upvotes · 2 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) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Rebuilding FIFA Standings Layout with CSS Subgrid","url":"https://daily.dev/posts/rebuilding-fifa-standings-layout-with-css-subgrid-didqlh9rj","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/rebuilding-fifa-standings-layout-with-css-subgrid-didqlh9rj"},"datePublished":"2026-07-19T13:50:29.755Z","dateModified":"2026-09-14T07:02:45.390Z","description":"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,...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/5da7520eabf246a723e253ef0b955c7e?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/5da7520eabf246a723e253ef0b955c7e?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Ahmad Shadeed","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Ahmad Shadeed","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/2bcc7ec837854040856ba4a4eb8946d0","url":"https://daily.dev/sources/ishadeed"},"commentCount":9,"discussionUrl":"https://daily.dev/posts/rebuilding-fifa-standings-layout-with-css-subgrid-didqlh9rj","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":62},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":9}],"keywords":"css,ui-design","timeRequired":"PT8M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Ahmad Shadeed","item":"https://daily.dev/sources/ishadeed"},{"@type":"ListItem","position":3,"name":"Rebuilding FIFA Standings Layout with CSS Subgrid"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/rebuilding-fifa-standings-layout-with-css-subgrid-didqlh9rj","comment":[{"@type":"Comment","text":"With billions in revenue, FIFA has no excuse for such terrible UX/UI. They desperately need to hire better app designers.\nMy respect to Author!!!","datePublished":"2026-07-23T15:39:38.676Z","url":"https://daily.dev/posts/DiDQlh9Rj#c-MswtOUifv","author":{"@type":"Person","name":"Maksym Tymofeiev","url":"https://daily.dev/rucaua","image":"https://media.daily.dev/image/upload/s--caTJyFHC--/f_auto/v1736549445/avatars/avatar_sIPMygD4Ld90iZsdsEqh7"}},{"@type":"Comment","text":"Explanation really helpful, thanks.","datePublished":"2026-07-20T06:13:14.624Z","url":"https://daily.dev/posts/DiDQlh9Rj#c-9nc4d0FhE","author":{"@type":"Person","name":"Domenico","url":"https://daily.dev/dome68","image":"https://media.daily.dev/image/upload/s--rNV6xJpl--/f_auto/v1746101112/avatars/avatar_pSxH9scFytc50bZnThT7M"}},{"@type":"Comment","text":"Very insightful and helpful. I’ll love for you to complete the article and cover the animation aspect too.\nThank you big time.","datePublished":"2026-07-22T13:23:05.326Z","url":"https://daily.dev/posts/DiDQlh9Rj#c-nnCNJeJk6","author":{"@type":"Person","name":"Rilwan Idowu Suleiman","url":"https://daily.dev/easyrilwan","image":"https://lh3.googleusercontent.com/a/ACg8ocIPtjroBAB3Z5w9mjszW2pp9hinDXM0LcYwitO5vsGtpVsZKe5g=s96-c"}},{"@type":"Comment","text":"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. 👏","datePublished":"2026-07-21T09:51:08.417Z","url":"https://daily.dev/posts/DiDQlh9Rj#c-HEFpKwIvi","author":{"@type":"Person","name":"Laura Moss","url":"https://daily.dev/lauramoss","image":"https://media.daily.dev/image/upload/s--ILA7G36z--/f_auto/v1780041334/avatars/avatar_4TSk50CCsSpOp4p8ftPwn?_a=BAMAMiWQ0"}},{"@type":"Comment","text":"Great demo! Really shows the power of CSS grid and subgrids.","datePublished":"2026-07-21T11:20:02.275Z","url":"https://daily.dev/posts/DiDQlh9Rj#c-UOjXiX4pM","author":{"@type":"Person","name":"Kevin From","url":"https://daily.dev/kevinfrom","image":"https://avatars.githubusercontent.com/u/33836112?v=4"}}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/rebuilding-fifa-standings-layout-with-css-subgrid-didqlh9rj#faq","mainEntity":[{"@type":"Question","name":"How do I use CSS subgrid to nest a grid inside a grid item and inherit the parent's tracks?","acceptedAnswer":{"@type":"Answer","text":"Set display: grid along with grid-template-columns: subgrid and grid-template-rows: subgrid on the child element after positioning it within the parent grid using grid-column and grid-row. This makes the child inherit the exact column and row tracks of the parent grid, allowing nested items like start and end markers to align precisely with the shared grid lines rather than creating a new independent grid. See more grid and subgrid layout breakdowns on daily.dev when tackling tricky bracket or hierarchy designs."}},{"@type":"Question","name":"How can I center flex or grid items so they align across differently nested containers, like matches in a tournament bracket?","acceptedAnswer":{"@type":"Answer","text":"Apply display: flex with flex-direction: column on the wrapping containers, then set flex: 1 on each inner item (like a match) so it takes equal available space along its siblings, and use justify-content: center within each item. This distributes space evenly so the visual center of each item lines up correctly, which plain align-items: center on the parent fails to achieve when nested containers have differing content heights. Developers refining alignment quirks like this often bookmark layout deep dives on daily.dev."}}]} ```