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?

HTML5 Semantic Elements Cheat Sheet

CSS Animations & Transitions Cheat Sheet

Explore Topics

#CSSGridDeepDive#CSSGridDeepDiveCheatSheet#WebDevelopment#Intermediate#DefiningAGrid#ItemPlacement#GridTemplateAreas#KeyGridProperties#Docker#CheatSheet#SkillVeris

Sri Hayavadhana Info-Tech

Professional Web Designing Services