TLDR Tech / Dev
Rebuilding FIFA Standings Layout with CSS Subgrid
FIFA's standings bracket splits each round's left and right halves into separate sibling elements. The rebuild with CSS Subgrid keeps semantic markup (one wrapper per round with .start/.end children) and uses grid-template-columns/rows: subgrid so children inherit the outer grid tracks and sit at opposite ends via negative line numbers that survive column-count changes.
Read the full story