November 25, 2025
Grid Wars: Subgrid vs Everything
Brand New Layouts with CSS Subgrid
Dev internet erupts: is Subgrid a layout miracle or just more CSS chaos
TLDR: Subgrid lets nested items line up with a page’s main layout, keeping clean structure and tidy designs. Comments split between “use container queries or display: contents” skeptics and “Grid and Flex live together” pragmatists, making this a key but debated step toward simpler, more accessible pages.
Subgrid just handed front‑end folks a shiny new toy: a way to make items buried inside lists line up with the main page grid, without wrecking your page’s structure. The tutorial shows how to stretch a grid through nested elements, why it helps accessibility, and when old standbys like Flexbox still win.
Cue the comment fireworks. One camp waved the “Isn’t this what container queries do?” flag, dropping a CodePen for good measure; others shot back that Subgrid keeps everything marching to the same ruler, instead of each box making its own call. A pragmatic crew chimed in with the shortcut: ul { display: contents }—great when you don’t need the full Subgrid superpower. Meanwhile, sensible questions piled up: how is this different from just nesting grids, and does Grid replace Flexbox or live side‑by‑side?
Amid the dust‑up, one fan delivered a standing ovation—“You’re killing it, Josh”—while the rest memed about feature fatigue and “so many new features, so little time.” Translation for non‑nerds: Subgrid helps keep your HTML clean and your layout magazine‑pretty. The debate is whether it’s a must‑have now, or just another tool in an already crowded belt.
Key Points
- •CSS Subgrid allows nested elements to participate in a parent CSS Grid’s layout tracks.
- •A flat grid can place a header spanning two rows and images across columns, but nesting images in a <ul> breaks the layout without subgrid.
- •Subgrid works by making the nested container a grid and sharing the parent’s rows/columns via the subgrid keyword.
- •With subgrid, each <li> in a <ul> can occupy its own cell within the parent grid, preserving semantic HTML structure.
- •Similar layouts can be achieved using Flexbox combined with nested grids as an alternative to subgrid.