CSS Grid Cheatsheet - Grid Layout Reference

For developers building full-page layouts with both rows and columns. Unlike Flexbox, Grid controls both axes at once, so it is the right tool for an app shell or a dashboard with a fixed header and footer. By the end you can define a repeatable template, place items into named areas, size columns with fr units so the layout fills the viewport, and build a responsive grid without hammering media queries.

Web Services·42 commands·Last updated 2026-07-21

Container Definition 8

display: grid

Enable grid layout (block-level)

display: inline-grid

Enable grid layout (inline-level)

grid-template-columns: 1fr 2fr 1fr

Define column tracks & ratio

grid-template-rows: 100px auto 100px

Define row tracks & sizes

grid-template-columns: repeat(3, 1fr)

Repeat 3 equal columns

grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))

Auto-fill responsive columns

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))

Auto-fit responsive columns

grid-template-areas: "header header" "sidebar main" "footer footer"

Visual named-area layout

Gap & Alignment 10

gap: 16px

Row & column gap

row-gap: 16px

Row gap only

column-gap: 16px

Column gap only

justify-items: stretch

Stretch horizontally in cell (default)

justify-items: center

Center horizontally in cell

align-items: center

Center vertically in cell

place-items: center

Set both horizontal & vertical

justify-content: center

Align grid horizontally

align-content: center

Align grid vertically

place-content: center

Set both grid alignments

Cells & Spans 7

grid-area: header

Place item into named area

grid-area: 1 / 1 / 3 / 3

Line-based: row-start/col-start/row-end/col-end

grid-column: 1 / 3

Span columns: line 1 to 3

grid-row: 1 / span 2

Span 2 rows from line 1

grid-column: 1 / -1

Span full row (line 1 to end)

grid-column: span 2

Span 2 columns

grid-row: span 3

Span 3 rows

Explicit & Implicit Tracks 6

grid-auto-columns: 100px

Implicit column track size

grid-auto-rows: 100px

Implicit row track size

grid-auto-flow: row

Auto-placement: by row (default)

grid-auto-flow: column

Auto-placement: by column

grid-auto-flow: dense

Dense packing, fill gaps

grid-auto-flow: row dense

Row-wise dense packing

Common Patterns 6

grid-template-columns: 1fr 1fr 1fr

Three equal columns

grid-template-columns: 200px 1fr

Sidebar + main content

grid-template-columns: repeat(12, 1fr)

12-column grid system

grid-template-columns: minmax(0, 1fr) minmax(0, 1fr)

Prevent overflow break

grid-template-areas: "header" "main" "footer"

Single-column stacked layout

grid-column: 1 / -1

Item spans full row

Responsive Tips 5

repeat(auto-fit, minmax(200px, 1fr))

Auto-fit, empty tracks collapse

repeat(auto-fill, minmax(150px, 1fr))

Auto-fill, keeps empty tracks

repeat(auto-fit, minmax(min(100%, 250px), 1fr))

min() prevents small-screen overflow

@media (max-width: 768px) { grid-template-columns: 1fr }

Single column on mobile

grid-auto-rows: minmax(150px, auto)

Responsive row height

Tips

fr is a flexible unit — 1fr 2fr means the second column is twice as wide as the first.
minmax(200px, 1fr) means min 200px, max flexible fill; pair with auto-fill for responsiveness.
grid-template-areas defines layout visually, improving code readability.
gap replaces the old grid-gap and is the current standard syntax.
auto-fit collapses empty tracks to stretch and fill; auto-fill keeps them — responsive layouts usually use auto-fit.

Official References

Each command links to its official documentation below, so you can verify the latest usage and read deeper.

MDN Web Docs

Maintained by LaoHand

Publicly updated on Jul 21, 2026, continuously proofread against official docs.

Contact Us

Wrong command or description? Send us corrections, business inquiries or product feedback by email.