CSS Grid Layout Syntax & Template Cheat Sheet

Essential CSS Grid cheatsheet covering two-dimensional tracks, grid-template-columns, fr units, minmax, auto-fit, and gap.

Grid Tracks & Columns

Create 3 equal-width flexible columns across available container widthgrid-template-columns: repeat(3, 1fr);

The golden responsive grid rule: wraps cards automatically without media queriesgrid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

Classic sticky-footer holy grail layout (header, flexible body, footer)grid-template-rows: auto 1fr auto;

Sets gutter spacing between both grid rows and grid columnsgap: 1.5rem;

Item Placement & Spanning

Span item across 2 column tracksgrid-column: span 2;

Span item across the entire full width of all columns from edge to edgegrid-column: 1 / -1;

Shorthand to align-items: center and justify-items: center in one declarationplace-items: center;

Frequently Asked Questions

• What is the difference between auto-fit and auto-fill in CSS Grid?

Auto-fill creates as many empty column tracks as can fit in the row, while auto-fit collapses empty tracks down to 0px and stretches active items to fill the entire remaining space.