CSS Grid Deep Dive Cheat Sheet
Covers defining grid containers, placing and spanning items, named grid-template-areas layouts, and key CSS Grid properties.
2 PagesIntermediateMar 20, 2026
Defining a Grid
Setting up columns, rows, and gaps.
css
.grid { display: grid; grid-template-columns: repeat(3, 1fr); /* 3 equal columns */ grid-template-rows: auto 1fr auto; gap: 16px; /* row-gap + column-gap */}.responsive-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem;}
Item Placement
Positioning and spanning individual grid items.
css
.item { grid-column: 1 / 3; /* start at line 1, end at line 3 (spans 2 cols) */ grid-row: span 2; /* span 2 rows from its auto-placed position */}.featured { grid-column: 2 / -1; /* from line 2 to the last line */}.self-aligned { justify-self: center; /* horizontal alignment within its cell */ align-self: end; /* vertical alignment within its cell */}
grid-template-areas
Naming regions of a layout for readable assignment.
css
.layout { display: grid; grid-template-columns: 200px 1fr; grid-template-rows: auto 1fr auto; grid-template-areas: "sidebar header" "sidebar main" "sidebar footer";}.header { grid-area: header; }.sidebar { grid-area: sidebar; }.main { grid-area: main; }.footer { grid-area: footer; }
Key Grid Properties
Frequently used sizing and alignment properties.
- grid-template-columns/rows- defines the track sizes of the grid
- fr unit- a fraction of the remaining free space in the grid container
- minmax(min, max)- a track size that clamps between a minimum and maximum value
- repeat(n, size)- shorthand for repeating a track definition n times
- grid-auto-flow: dense- backfills earlier gaps in the grid as items are auto-placed
- place-items / place-content- shorthand combining the align- and justify- variants
- grid-template-areas- named-area layout defined as an ASCII map of region names
Subgrid
Letting a nested grid inherit its parent's tracks so children align across cards.
css
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;}.card { display: grid; grid-row: span 3; /* inherit the parent's row tracks so title/body/footer line up across every card, regardless of content length */ grid-template-rows: subgrid; gap: inherit;}.card > .title { grid-row: 1; }.card > .body { grid-row: 2; }.card > .footer { grid-row: 3; }
Named Grid Lines
Assigning line names for self-documenting, refactor-safe placement.
css
.layout { display: grid; grid-template-columns: [full-start] minmax(1rem, 1fr) [content-start] minmax(0, 60ch) [content-end] minmax(1rem, 1fr) [full-end];}.article { grid-column: content; } /* shorthand: content-start / content-end */.hero-img { grid-column: full-start / full-end; } /* bleeds edge-to-edge */
Implicit Grid & Auto-Flow
Controlling tracks the browser creates on the fly for overflow items.
css
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 150px; /* size for rows created implicitly */ grid-auto-flow: row dense; /* backfill gaps left by spanning items */ gap: 8px;}.gallery .featured { grid-column: span 2; grid-row: span 2; /* 'dense' lets later small items fill the hole beside it */}
Advanced Grid Vocabulary
Terms that show up once you move past basic track/placement usage.
- subgrid- a nested grid item's grid-template-columns/rows value that reuses the parent's track sizing instead of defining its own
- minmax(0, 1fr) vs minmax(auto, 1fr)- tracks default to a minimum of auto (content size); use 0 as the minimum to let long words/tables actually shrink instead of overflowing
- grid-template-columns: masonry- experimental (Firefox behind a flag) track type that packs items like a masonry layout without a JS library
- implicit grid- rows/columns the browser generates automatically when an item is placed outside the explicit template
- grid-auto-flow: dense- reorders auto-placed items to fill earlier gaps, at the cost of visual DOM-order mismatch
- justify-tracks / align-tracks- masonry-only properties controlling alignment of items within their packed track
- aspect-ratio inside a grid cell- combine with a fixed grid-auto-rows to keep image tiles square without JS measurement
Overlapping Grid Items
Stacking elements on shared cells for hero/badge compositions without absolute positioning.
css
.hero { display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(4, minmax(80px, auto));}.hero-image { grid-area: 1 / 1 / 5 / 7; /* row-start / col-start / row-end / col-end */}.hero-badge { grid-area: 1 / 5 / 2 / 7; /* overlaps the top-right of the image */ z-index: 2; /* grid items paint in source order by default */ align-self: start;}
Pro Tip
Combine repeat(auto-fit, minmax(200px, 1fr)) for responsive card grids that need zero media queries: auto-fit collapses empty tracks while auto-fill preserves them, which matters once you expect the item count to change.
Was this cheat sheet helpful?
Explore Topics
#CSSGridDeepDive#CSSGridDeepDiveCheatSheet#WebDevelopment#Intermediate#DefiningAGrid#ItemPlacement#GridTemplateAreas#KeyGridProperties#Docker#CheatSheet#SkillVeris
