Overview

Let nested children inherit track sizing from a parent grid.

CSS Subgrid focuses on two-dimensional layout. Grid is strongest when rows and columns both matter, especially when you want explicit placement, named areas, or repeatable responsive tracks.

Core Ideas

• Use CSS Subgrid when rows and columns both shape the design.
• Define tracks with repeat, minmax, fr units, or named lines.
• Let auto-placement help, but explicitly place important regions.
• Check how the grid behaves when content becomes longer than expected.

Step by Step

1. Set display: grid on the layout parent for CSS Subgrid.
2. Define columns, rows, and gaps before placing individual items.
3. Use grid-area, grid-column, or grid-row for intentional placement.
4. Test extra content so implicit tracks do not surprise you.

Beginner Explanation

CSS Subgrid lets a nested grid reuse the row or column tracks of its parent.

Subgrid is helpful when cards or nested sections need their inner content to line up with neighboring cards.

Because browser support and layout needs vary, always provide a reasonable fallback or test target browsers.

Before You Start

• Before practicing CSS Subgrid, decide which element should be the grid container.
• Count the columns and rows the design needs before writing CSS.
• Decide whether auto-placement is enough or whether important items need explicit placement.
• Prepare extra content so you can test how the grid behaves when the layout is not perfect.

Key Grid Properties

• subgrid lets nested items align to parent tracks.
• grid-row: span can make a child participate across multiple parent rows.
• Fallback layouts may still need normal grid-template rows.
• Subgrid is most useful for repeated card or form structures.

Plain-English Glossary

• Grid container: the parent element with display: grid.
• Grid item: a direct child of the grid container.
• Track: one row or column.
• Grid line: the boundary between tracks.
• Grid area: a rectangular group of cells.
• Implicit grid: rows or columns created automatically when content does not fit the explicit grid.

What You Will Learn

• Explain which tracks, lines, or areas CSS Subgrid creates.
• Predict where a new grid item will be placed.
• Use browser developer tools to inspect the grid overlay.
• Change one grid property in the editor and explain how the layout reacts.

Where You Use This in Real Projects

You use CSS Subgrid in dashboards, article layouts, galleries, product grids, admin screens, pricing sections, forms, and app shells.

Grid is especially useful when rows and columns both matter, or when the layout needs named regions that stay readable in CSS.

Browser and Accessibility Notes

• Visual placement should not make the reading order confusing.
• Avoid dense placement when it makes keyboard or source order hard to follow.
• Test small screens, long text, zoom, and extra items so implicit tracks do not surprise you.
• Grid changes layout, not document meaning, so start with semantic HTML and ordered headings.

Code Example

.product-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.product-card {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
}

Another Example

.layout {
  display: grid;
  grid-template-columns: minmax(12rem, 18rem) 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 1rem;
}

.layout__wide {
  grid-column: 1 / -1;
}

More Practice Examples

Example 1: Responsive card grid

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem;
}

.card--featured {
  grid-column: span 2;
}

• auto-fit creates as many columns as fit in the available space.
• minmax keeps cards from becoming too small while still allowing them to grow.
• A featured item can span more columns, but you should test narrow screens.

Example 2: Page shell with named areas

.shell {
  display: grid;
  grid-template-areas:
    "top top"
    "nav content";
  grid-template-columns: 16rem 1fr;
  gap: 1rem;
}

.top { grid-area: top; }
.nav { grid-area: nav; }
.content { grid-area: content; }

• Named areas make the layout easy to read.
• The template rows describe the visual page shell.
• Area names must match the grid-area values on children.

Example 3: Auto-placement gallery

.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 7rem;
  grid-auto-flow: dense;
  gap: .75rem;
}

.gallery__wide { grid-column: span 2; }
.gallery__tall { grid-row: span 2; }

• The explicit columns are fixed, while rows can be created automatically.
• span makes some items larger without manually placing each one.
• dense can fill gaps visually, so check that reading order still makes sense.

Example Explained

• The CSS Subgrid example starts by choosing the grid container.
• The template properties define the explicit rows, columns, or named areas.
• Direct children become grid items and can be auto-placed or explicitly placed.
• The gap property creates consistent spacing without extra wrapper elements.

How to Read This Example

1. Find display: grid and name the grid container.
2. Read grid-template-columns, grid-template-rows, or grid-template-areas before looking at item placement.
3. Identify which items are auto-placed and which items are manually positioned.
4. Change one track, span, area, or gap in the CSS Subgrid example and resize the preview.

Checklist

• Name important areas or lines when it improves readability.
• Use minmax and auto-fit/auto-fill for resilient responsive grids.
• Check how implicit rows and columns are created.

Common Mistakes

• Overplacing every item when auto-placement would be simpler.
• Forgetting that content can create implicit tracks.
• Using fixed columns where minmax or fr units would respond better.

Do and Don't

• Do: use CSS Subgrid when rows and columns both matter.
• Do: use gap for spacing and minmax/fr units for flexible tracks.
• Don't: use Grid only to center one row of buttons when Flexbox would be simpler.
• Don't: use dense placement if it makes visual order disagree with meaningful source order.

Practice Challenge

Turn the CSS Subgrid example into a small page section, then add one extra item and predict where Grid will place it.

Try These Changes

• Change one column from 1fr to minmax(12rem, 1fr) and explain the difference.
• Add one extra grid item and predict where auto-placement will put it.
• Make one item span two columns, then test the narrow viewport result.
• Turn on the browser grid overlay and identify lines, tracks, gaps, and areas.

Quick Check

• Question: What creates a grid container? Answer: display: grid or display: inline-grid.
• Question: What is a track? Answer: One grid row or column.
• Question: What does 1fr mean? Answer: One share of available free space.
• Question: Which elements become grid items? Answer: Direct children of the grid container.

Debugging Checks

• Confirm display: grid is on the parent element.
• Use browser grid overlays to inspect tracks, line numbers, gaps, and areas.
• Check for misspelled area names and non-rectangular grid-template-areas.
• Check implicit rows or columns when items appear outside the expected layout.

Mini Project

Build three pricing cards for CSS Subgrid: line up title, feature list, and action rows with Grid or subgrid where supported, then describe the fallback.

Mastery Check

• You can describe the tracks used by the CSS Subgrid layout.
• You can place one item explicitly and let another auto-place.
• You can make the grid adapt when content or viewport size changes.