Recommended Free Tools
CSS Subgrid lets a nested grid reuse its parent grid’s column tracks, row tracks, or both. Use it when content inside separate components must align with the larger layout; use a regular nested grid when the component needs its own independent track sizing or implicit tracks.
What CSS Subgrid shares
A regular nested grid creates its own tracks. A subgrid instead adopts the parent grid’s track definitions in the dimension where you specify subgrid. The nested element remains a grid container and lays out its own children, but those children can align to tracks established higher in the layout.
As an Amazon Associate I earn from qualifying purchases.
The CSS Grid Layout Module Level 2 specification describes the idea as the ability to “pass grid parameters down through nested elements, and content-based sizing information back up to their parent.” In practical terms, track structure can flow inward, while content may influence parent track sizing when the sizing method permits it.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
How to write a subgrid
Make the nested element a grid container, then set subgrid on the axis that should reuse the parent’s tracks:
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
grid-template-columns: subgridshares the parent’s columns.grid-template-rows: subgridshares the parent’s rows.- Set both declarations when the nested layout needs to share both dimensions.
Here, each card’s content occupies the parent’s two-column span, so its internal columns follow the page grid. The card still defines its own rows.
.layout {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
}
.card {
grid-column: span 2;
display: grid;
grid-template-columns: subgrid;
gap: 1rem;
}
.card__title {
grid-column: 1;
}
.card__body {
grid-column: 2;
}If several cards use this structure, their headings and body content can align to the same parent-defined columns rather than to separately calculated widths inside each card. The nested grid must occupy the parent tracks it is meant to share.
For a broader nested layout that inherits parent columns while controlling its own rows, see the MDN CSS grid layout tutorial.
When Subgrid is useful
Aligning repeated components
Use Subgrid when repeated cards or panels have internal regions—such as a heading, description, and action area—that should line up across a collection even when their content differs. The parent defines the shared tracks; each nested component places its children on those tracks.
Keeping nested content on a page grid
A nested section can follow page-level columns instead of establishing a second, slightly different column system. This is useful when content inside a component needs to align with content outside it.
Sharing only the axis that matters
Choose columns, rows, or both based on the alignment requirement. If only the nested content’s horizontal divisions must match the parent, share columns and leave rows independent. Avoid sharing an axis merely because the other axis is shared.
Rank #3
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
When to keep a regular nested grid
Use an independent nested grid when the child needs its own track sizing or needs implicit tracks. A subgrid takes its track definitions from the parent in the shared dimension, so it is not the right choice when that dimension must be sized separately inside the child.
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Implicit rows are a common decision point. MDN advises removing the subgrid value and controlling implicit row sizing with grid-auto-rows when implicit rows are needed. For example:
.independent-list {
display: grid;
grid-template-columns: 1fr;
grid-auto-rows: minmax(3rem, auto);
}Here the element establishes its own single column and sizes any implicit rows independently; it is not sharing the parent’s rows.
Track sizing, gaps, and line names
Content and parent sizing
Content in a subgrid can affect the parent’s track sizing when the parent’s sizing method allows content to contribute. Auto-sized rows are one example. This lets nested content participate in sizing the shared layout, but it also means the content inside a component can affect the dimensions of parent tracks.
Gaps
A subgrid inherits the parent’s gap in the shared dimension. You can override the gap on the subgrid if the nested layout needs different spacing.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Line names
Parent line names can pass into a subgrid, and the subgrid can add its own line names. This can make placement more expressive when the parent already names meaningful layout boundaries.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.A practical decision checklist
- Do nested items need to align with tracks outside their immediate container? If not, an independent grid is usually simpler.
- Which dimension needs that alignment: columns, rows, or both?
- Should nested content be able to contribute to parent track sizing under the selected sizing method?
- Are inherited gaps and parent line names useful, or does the child need its own values?
- Does the child require independent or implicit tracks in the dimension you plan to share? If so, use a regular nested grid for that dimension.
Browser support
MDN labels Subgrid “Baseline” and “Widely available,” and reports broad browser availability since September 2023. That summary does not replace checking the actual browser versions covered by your project’s support policy. See MDN’s Subgrid guide for the feature details and compatibility information.
Or skip the browser setup
If you need a screenshot of a page to inspect a grid layout, you can capture it with a website screenshot API instead of setting up browser automation. ScreenshotNeo offers a one-request capture:
Quick Recap
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo documentation for request options. ScreenshotNeo accepts cookie banners and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers identify the page verdict and billing status. Its MCP server provides screenshot tools for AI agents. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 shots. Learn more at ScreenshotNeo, or sign up for 1,000 free screenshots a month with no card.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
