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
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
