Love CSS Grid but struggle with aligning nested items? Meet Subgrid! The CSS subgrid feature lets child grid containers inherit the parent grid’s row or column tracks. This means you can build perfectly aligned nested layouts without repeating track definitions — perfect for cards, lists, or complex UI sections. In this MiniCoursey quick guide, you’ll learn how subgrid works, when to use it, and how it simplifies advanced layouts.
What is CSS Subgrid?
Subgrid is an extension of CSS Grid that allows a nested grid to use its parent grid’s sizing and spacing. Instead of creating independent tracks, the child grid follows the parent’s tracks for precise alignment.
Basic Syntax
To use Subgrid, define the parent container as a grid and the child container as a grid with subgrid for rows, columns, or both.
.parent {
display: grid;
grid-template-columns: 1fr 2fr;
}
.child {
display: grid;
grid-template-columns: subgrid;
}
In this example, the .child grid’s columns perfectly match the parent’s columns without repeating the track sizes.
When to Use Subgrid
- Cards or tiles that need aligned content inside a grid.
- Nested layouts like media objects, lists, or feeds.
- Reusable UI patterns that snap into a parent grid.
💡 Pro Tip: You can choose to subgrid rows, columns, or both — super flexible for complex designs.
⚠️ Common Mistake: Remember, Subgrid only works inside an existing grid context — no effect on flex or block containers.
FAQ
Q: Is Subgrid widely supported?
A: Subgrid is supported in Firefox and is coming to other browsers — always check the latest compatibility before using in production.
Q: Do I still need Grid template definitions?
A: Yes, but only on the parent! The child uses subgrid instead of duplicating tracks.
Related Link
👉 Check out previous: CSS Container Queries — Smarter Responsive Design
Where to Learn More
Explore MDN’s Subgrid docs and experiment with nested layouts that stay perfectly aligned — no more guesswork!
Conclusion
Congrats — you now know how to align nested content effortlessly with CSS Subgrid! It’s a game changer for building clean, maintainable grid layouts.
✨ Bookmark MiniCoursey for more quick & free mini courses!