# subgrid Published articles for subgrid. This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles. ## Rebuilding FIFA Standings Layout with CSS Subgrid DevFeed: [Rebuilding FIFA Standings Layout with CSS Subgrid]() Original publisher: [Read original article]() Author: Ahmad Shadeed Published: 2026-07-19T00:00:00Z Content type: tutorial Language: en Sources: [Ahmad Shadeed]() Topics: [CSS](), [layout](), [Web Development]() Tags: [css](), [css-grid](), [devtools](), [grid](), [layout](), [subgrid]() ### AI overview A tutorial on rebuilding the FIFA standings layout with CSS Grid and CSS subgrid. It explains how to structure the markup and position nested rounds across responsive layouts, while noting that the approach is a suggestion and does not cover animations or hover effects. ### Source excerpt A look at how to rebuild the FIFA standings layout by using CSS grid, subgrid, and more. ## Brand New Layouts with CSS Subgrid DevFeed: [Brand New Layouts with CSS Subgrid]() Original publisher: [Read original article]() Author: Josh W. Comeau Published: 2025-11-25T12:00:00Z Content type: tutorial Language: en Sources: [Josh Comeau's blog]() Topics: [CSS](), [layout](), [Web Development](), [Document Object Model (DOM)](), [HTML]() Tags: [css](), [css-grid](), [devtools](), [gotchas](), [grid](), [grid-layout](), [html](), [layouts](), [subgrid]() ### AI overview A tutorial explaining how CSS Subgrid extends grid layouts through the DOM tree, enabling deeply nested elements to participate in a shared layout. It covers the fundamentals, implementation mechanics, semantic markup, DevTools inspection, and common gotchas. ### Source excerpt Subgrid allows us to extend a grid template down through the DOM tree, so that deeply-nested elements can participate in the same grid layout. At first glance, I thought this would be a helpful convenience, but it turns out that it's so much more. Subgrid unlocks exciting new layout possibilities, stuff we couldn't do until now. ✨ ## Rebuilding a comment component with modern CSS DevFeed: [Rebuilding a comment component with modern CSS]() Original publisher: [Read original article]() Author: Ahmad Shadeed Published: 2023-06-13T00:00:00Z Content type: tutorial Language: en Sources: [Ahmad Shadeed]() Topics: [CSS](), [Web Development](), [layout](), [HTML]() Tags: [comment](), [component](), [css](), [flexbox](), [has](), [html](), [layout](), [subgrid]() ### AI overview A tutorial on rebuilding a nested comment component layout with modern CSS. It explores HTML list structure, indentation and spacing, and CSS features including flexbox, container queries, style queries, :has, and subgrid. ### Source excerpt Building a comment component with modern CSS like flexbox, logical properites, :has, style queries, and subgrid. ## CSS Style Queries DevFeed: [CSS Style Queries]() Original publisher: [Read original article]() Author: Ahmad Shadeed Published: 2022-12-19T00:00:00Z Content type: tutorial Language: en Sources: [Ahmad Shadeed]() Topics: [CSS](), [browser](), [Web platform](), [Google Chrome](), [Web Development](), [border-image]() Tags: [browsers](), [canary](), [chrome](), [component](), [container](), [css](), [css-variables](), [experimental](), [queries](), [query](), [selector](), [style](), [subgrid]() ### AI overview This tutorial explains CSS style queries, which query a container's CSS property or variable instead of its size. It describes their experimental implementation in Chrome Canary and contrasts them with container size queries. ### Source excerpt For me, 2022 is the best year ever for CSS. We got a lot of new stuff supported in stable browsers and it's just like living a dream. From CSS subgrid, :has selector, container queries, and the new viewport units. So many things to grasp, I understand - but I'm sure we agree that this is exciting, isn't it? Recently, the Chrome team released experimental support for a new proposed CSS spec, style queries. In short, they let us query the style of a container, rather than the size only. ## Day 7: subgrids DevFeed: [Day 7: subgrids]() Original publisher: [Read original article]() Author: Manuel Matuzović Published: 2022-10-04T00:00:00Z Content type: tutorial Language: en Sources: [Manuel Matuzović]() Topics: [CSS](), [Web Development](), [HTML](), [Web]() Tags: [css](), [grid](), [html](), [javascript](), [my-blog](), [subgrid](), [web-browser]() ### AI overview A tutorial on CSS Subgrid, explaining how a nested grid can align its items with the tracks of a parent grid. It includes CSS examples and notes browser support for Firefox 71+ and Safari 16+. ### Source excerpt Subgrid allows a grid-item with its own grid to align with its parent grid (currently only in Firefox 71+ and Safari 16+). In the following example, the div elements use the grid defined in the dl element. The result is that all the dt and dd elements are aligned in the same "columns" respectively, even though they're not on the same level in the DOM.
HTML
The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser.
JavaScript
JavaScript often abbreviated JS, is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS
dl { display: grid; gap: 0.5rem 2rem; grid-template-columns: auto 1fr; } div { display: inherit; grid-column: 1 / -1; grid-template-columns: subgrid; } HTML The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser. JavaScript JavaScript often abbreviated JS, is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS Both columns are neatly aligned in the same grid. To make it a bit more obvious, here's how the same grid looks like if you don't use subgrid but copy the grid-template-columns declaration from the dl and use it on the div. dl { display: grid; gap: 0.5rem 2rem; grid-template-columns: auto 1fr; } div { display: inherit; gap: inherit; grid-column: 1 / -1; grid-template-columns: auto 1fr; } HTML The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser. JavaScript JavaScript often abbreviated JS, is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS The width of each element differs because each div forms its own grid. My blog doesn't support comments yet, but you can reply via blog@matuzo.at. ## Learn CSS Subgrid DevFeed: [Learn CSS Subgrid]() Original publisher: [Read original article]() Author: Ahmad Shadeed Published: 2022-05-06T00:00:00Z Content type: tutorial Language: en Sources: [Ahmad Shadeed]() Topics: [CSS](), [Web Development](), [layout](), [browser]() Tags: [browser-support](), [css](), [css-grid](), [examples](), [grid](), [here](), [layout](), [nested](), [subgrid](), [use-cases]() ### AI overview A deep dive into CSS Subgrid, explaining the alignment problem it solves, how inherited grid rows and columns work, browser support, and practical layout examples. ### Source excerpt A deep-dive into the new CSS subgrid feature with real-life examples and use-cases.