CSS Subgrid Guide

Complete guide to CSS Subgrid with visual examples.
Align nested grid items with parent grid lines.

What is CSS Subgrid?

CSS Subgrid allows a grid item that is also a grid container to inherit its parent grid's track sizing. This means nested elements can align perfectly with the parent grid's lines, solving one of the most frustrating CSS layout problems.

The Problem Subgrid Solves

Without subgrid, nested grid containers create their own independent track sizing. This causes misalignment when you want cards, forms, or tables where content across multiple items should line up.

Without Subgrid

Title

Description varies in length causing misalignment

Short

Short text

Content doesn't align across cards

With Subgrid

Title

Description varies in length but still aligns

Short

Short text matches height

Content aligns perfectly

Browser Support

Subgrid is now supported in all major browsers as of 2023.

Chrome 117+Firefox 71+Safari 16+Edge 117+

Basic Syntax

1. Parent Grid Container

.parent {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto auto auto;
  gap: 1rem;
}

First, create a parent grid with defined columns and/or rows.

2. Subgrid Columns

.child {
  display: grid;
  grid-column: span 3; /* Span all parent columns */
  grid-template-columns: subgrid;
}

The child spans parent columns and uses subgrid to inherit their sizing.

3. Subgrid Rows

.child {
  display: grid;
  grid-row: span 3; /* Span all parent rows */
  grid-template-rows: subgrid;
}

Similarly, you can use subgrid for rows only.

4. Subgrid on Both Axes

.child {
  display: grid;
  grid-column: span 3;
  grid-row: span 3;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}

You can use subgrid on both columns and rows simultaneously for full alignment.

How Subgrid Works

Visual Diagram: Lines Inherited from Parent

Parent Grid Lines

Child Using Subgrid

Item 1

Item 2

Item 3

Subgrid A

Subgrid B

Subgrid C

The child element (dashed border) uses grid-template-columns: subgrid to inherit the parent's column lines. Notice how A, B, C align perfectly with items 1, 2, 3 above.

Gap Inheritance

When using subgrid, the child inherits the parent's gap value by default. You can override this with your own gap on the subgrid container.

Inherited Gap (default)

Parent

Gap

Same

Gap

Custom Gap Override

Parent

Gap

Smaller

Gap

Card Grid with Aligned Content

One of the most common use cases: ensuring card titles, descriptions, and buttons align across a row.

Live Demo

Short Title

Brief description.

A Much Longer Card Title That Wraps

This card has a much longer description that takes up more vertical space and demonstrates how subgrid keeps everything aligned.

Medium Title

Medium length description here.

Notice how all buttons align at the bottom, regardless of content length. This is subgrid in action!

CSS Code

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  /* Each card has: image, content, button */
}

/* With Subgrid for alignment: */
.card-grid-subgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto 1fr auto; /* Shared rows */
  gap: 1.5rem;
}

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

Form with Aligned Labels and Inputs

Create perfectly aligned form layouts where all labels and inputs line up.

Live Demo

Name

Email Address

Phone

All labels align to the right, and all inputs align to the left, thanks to subgrid inheriting the parent's columns.

CSS Code

.form-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem 1.5rem;
}

.form-group {
  display: grid;
  grid-column: span 2;
  grid-template-columns: subgrid;
  align-items: center;
}

.form-group label {
  text-align: right;
}

.form-group input {
  width: 100%;
}

Table-like Layout Without Tables

Build accessible, responsive table layouts using CSS Grid with subgrid for perfect column alignment.

Live Demo

Product

Price

Stock

CSS Code

.table-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
}

.table-row {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  padding: 0.75rem 0;
  border-bottom: 1px solid #eee;
}

.table-row:hover {
  background: #f8f8f8;
}

.table-header {
  font-weight: 600;
  background: #f3f4f6;
}

Subgrid vs Nested Grid

Feature	Nested Grid	Subgrid
Track sizing	Independent of parent	Inherits from parent
Alignment across items	No	Yes
Gap inheritance	Must specify separately	Inherits (can override)
Named lines	Own line names	Inherits parent line names
Use case	Isolated grid layouts	Aligned nested content

Visual Comparison

Nested Grid (misaligned)

Label

Value A

Different

Each nested grid has its own column sizing

Subgrid (aligned)

Label

Value A

Label

Value B

Subgrid inherits parent column sizing

Use Nested Grid When:

- Layout is self-contained
- No need to align with siblings
- Different column structure needed

Use Subgrid When:

- Content must align across items
- Building card grids, forms, tables
- Consistent column widths needed

Advanced Patterns

Multi-level Subgrid

Subgrid can be nested multiple levels deep. Each level inherits from its direct parent.

Grandparent (4 columns)

Parent (subgrid of 4)

CSS Code

.grandparent {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.parent {
  grid-column: span 4;
  display: grid;
  grid-template-columns: subgrid;
}

.child {
  grid-column: span 2;
  display: grid;
  grid-template-columns: subgrid;
}

Named Grid Lines with Subgrid

Subgrid inherits named grid lines from the parent, making placement semantic and maintainable.

[sidebar][content]

Sidebar

Content area that expands

Nav

Main content

CSS Code

.grid-container {
  display: grid;
  grid-template-columns:
    [sidebar-start] 200px
    [sidebar-end content-start] 1fr
    [content-end];
  gap: 2rem;
}

.subgrid-item {
  grid-column: sidebar-start / content-end;
  display: grid;
  grid-template-columns: subgrid;
}

/* Child can reference parent's line names */
.sidebar {
  grid-column: sidebar-start / sidebar-end;
}

.content {
  grid-column: content-start / content-end;
}

Responsive Subgrid Layouts

Enable subgrid only on larger screens where alignment matters, falling back to regular grid on mobile.

CSS Code

.responsive-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 768px) {
  .responsive-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .responsive-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.card {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

/* Enable subgrid on larger screens */
@media (min-width: 768px) {
  .responsive-grid {
    grid-template-rows: auto 1fr auto;
  }

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

Tip: On mobile, cards stack and don't need cross-item alignment. Use subgrid only at breakpoints where cards sit side-by-side.

About CSS Subgrid

CSS Subgrid is part of the CSS Grid Layout Module Level 2 specification. It solves the long-standing problem of aligning nested grid items with their ancestors.

Before subgrid, developers had to use workarounds like JavaScript calculations, fixed heights, or complex flexbox hacks. Subgrid provides a native, declarative solution.

Key things to remember: the child must span the parent's tracks to use subgrid on that axis, and subgrid inherits both track sizing and gap (which can be overridden).

Inspect CSS Grid and Subgrid on any website

Frontend Hero's CSS Scanner shows you all CSS properties of any element, including grid layouts, subgrid, and more. Click any element to see its complete styles.

Get Frontend Hero now →

Explore more CSS tools

CSS Grid Generator

Create grid layouts visually

CSS Flexbox Generator

Create flex layouts visually

CSS Gradient Generator

Create custom gradients

CSS Text Gradient

Gradient text effects

CSS Gradients Collection

275+ ready-to-use gradients

CSS Box Shadow Generator

Design multi-layer shadows

CSS Selection Generator

Style text highlight colors

CSS Scrollbar Generator

Style custom scrollbars

CSS Blend Mode Generator

Mix colors with blend modes

CSS Cursor Generator

Preview all cursor styles

CSS Loader Generator

Create loading animations

BTN

CSS Button Generator

Design buttons with hover effects

✨

CSS Glow Generator

Create neon glow effects

Fluid Typography

Scale text across screen sizes

Browse all free CSS tools →