A tournament bracket with CSS Subgrid. A masterclass from Ahmad Shadeed ⚽️
Ahmad Shadeed shows how to build a CSS Subgrid tournament bracket with aligned matches and connecting lines.
What is the main problem with brackets like these?
With each round (round of 16, quarterfinals, semifinals, final), the number of matches halves, while the vertical spacing between them increases. At the same time, the team cards in the next round must be centered precisely relative to the pair of matches in the previous round.
How Subgrid solves it
- A single container as the source of truth: Apply
display: gridto the parent with a fixed number of rows for the entire tournament (for example, 16 rows for the round of 16). - Passing the grid down: Each round and individual match card becomes a child grid with
grid-template-rows: subgrid. - Native alignment: A quarterfinal card simply takes up
grid-row: span 4, and the browser automatically centers its contents exactly in the middle of those four rows. No eyeballingmargin-topor calculating positions in JS! - Connecting lines: Lines between rounds are drawn directly with
::before/::afterpseudo-elements and gradients tied to the grid, so they scale perfectly on resize.
In the article, Ahmad explains component construction, working with grid-row and mobile adaptation with horizontal scrolling in detail. An excellent tutorial for finally understanding subgrid through a real product use case.