CSS Grid Layout Cheat Sheet — Complete Visual Reference & Syntax

Comprehensive reference for CSS Grid containers, grid tracks, template areas, responsive minmax, fr units, and alignment properties.

Container Setup & Track Definitions

display: grid;

Establish a block-level grid formatting context

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

Create 3 equal-width columns that flex to available space

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

Responsive auto-wrapping column grid with zero media queries

grid-template-rows: auto 1fr auto;

Sticky header, fluid body, and footer layout

gap: 1.5rem;

Shorthand for row-gap and column-gap spacing between cells

grid-column: span 2;

Cause a grid item to span across 2 columns

grid-column: 1 / -1;

Span an item completely from the first track line to the very last track line

grid-row: 2 / span 3;

Start at row line 2 and stretch across 3 row tracks

grid-area: header;

Assign named cell matching grid-template-areas blueprint

place-items: center;

Perfect horizontal and vertical centering for all child items in 1 line

justify-content: space-between;

Distribute grid tracks along the inline (horizontal) axis

align-items: stretch;

Stretch all grid items to fill track height (default behavior)