CSS Grid Cheat Sheet

Grid Basics

CSS Grid is a two-dimensional layout system for creating complex row and column layouts.

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;    /* 3 columns */
  grid-template-rows: auto 1fr auto;     /* 3 rows */
  gap: 16px;                              /* space between cells */
}

Tip: fr (fraction) distributes available space. 1fr 2fr means the second column gets twice the space of the first.

Container Properties

display

grid inline-grid

Defines a grid container. inline-grid makes the container inline-level.

grid-template-columns

<track-size>... | repeat() | none

Defines the column sizes. Example: 200px 1fr 2fr or repeat(3, 1fr).

grid-template-rows

<track-size>... | repeat() | none

Defines the row sizes. Example: 100px auto 1fr.

grid-template-areas

"name name" per row

Defines named grid areas. Use . for empty cells. Items reference areas with grid-area.

grid-template

Shorthand for rows / columns / areas

Example: "header header" 80px "sidebar main" 1fr / 200px 1fr

grid-auto-columns

<track-size>

Size for implicitly-created columns (when items are placed beyond explicit grid).

grid-auto-rows

<track-size>

Size for implicitly-created rows. Example: grid-auto-rows: minmax(100px, auto).

grid-auto-flow

row column dense row dense

Controls how auto-placed items flow. dense fills gaps from earlier items.

gap / row-gap / column-gap

<length>

Spacing between grid cells. gap: 16px 24px sets row and column gaps.

Item Properties

grid-column-start / end

<line> | span <n> | auto

Where the item starts/ends on column axis. Lines are numbered from 1.

grid-column

Shorthand: start / end

Example: grid-column: 1 / 3 spans columns 1-2. grid-column: 1 / -1 spans all.

grid-row-start / end

<line> | span <n> | auto

Where the item starts/ends on row axis.

grid-row

Shorthand: start / end

Example: grid-row: 1 / span 2 starts at row 1, spans 2 rows.

grid-area

<name> | row-start / col-start / row-end / col-end

Assigns to a named area or specifies all four positions. Example: grid-area: header.

justify-self

start end center stretch

Aligns the item along the inline (row) axis within its cell.

align-self

start end center stretch

Aligns the item along the block (column) axis within its cell.

place-self

Shorthand: align-self / justify-self

Example: place-self: center centers in both axes.

Line Number Examples

/* Span specific columns */
.item-a { grid-column: 1 / 3; }       /* columns 1-2 */
.item-b { grid-column: 2 / span 2; }  /* start at 2, span 2 */
.item-c { grid-column: 1 / -1; }      /* full width (all columns) */

/* Span specific rows */
.item-d { grid-row: 1 / 4; }          /* rows 1-3 */
.item-e { grid-row: span 2; }         /* span 2 rows from auto */

Sizing Functions

Function	Description	Example
`fr`	Fraction of available space	`1fr 2fr 1fr`
`repeat(n, size)`	Repeat a track pattern n times	`repeat(3, 1fr)` = `1fr 1fr 1fr`
`repeat(auto-fill, ...)`	Fill with as many tracks as fit	`repeat(auto-fill, minmax(200px, 1fr))`
`repeat(auto-fit, ...)`	Like auto-fill but collapses empty tracks	`repeat(auto-fit, minmax(200px, 1fr))`
`minmax(min, max)`	Track size between min and max	`minmax(100px, 1fr)`
`min-content`	Smallest size without overflow	Shrink-wraps to content
`max-content`	Size based on largest content	No wrapping
`fit-content(max)`	Clamp between min-content and max	`fit-content(300px)`

auto-fill vs auto-fit: auto-fill keeps empty tracks (maintains space). auto-fit collapses empty tracks so items stretch to fill. Use auto-fit for most responsive grids.

Template Areas

.layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: 60px 1fr 40px;
  grid-template-areas:
    "header  header"
    "sidebar main"
    "footer  footer";
  min-height: 100vh;
}

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }

/* Use . for empty cells */
grid-template-areas:
  "header header header"
  ".      main   sidebar"
  "footer footer footer";

Alignment

Property	Axis	Applies To	Description
`justify-items`	Inline (row)	Container	Align all items within their cells horizontally
`align-items`	Block (column)	Container	Align all items within their cells vertically
`place-items`	Both	Container	Shorthand for `align-items` / `justify-items`
`justify-content`	Inline	Container	Align the entire grid within the container horizontally
`align-content`	Block	Container	Align the entire grid within the container vertically
`place-content`	Both	Container	Shorthand for `align-content` / `justify-content`
`justify-self`	Inline	Item	Align a single item horizontally within its cell
`align-self`	Block	Item	Align a single item vertically within its cell
`place-self`	Both	Item	Shorthand for `align-self` / `justify-self`

Values: start end center stretch (+ space-between space-around space-evenly for content properties)

Common Patterns

Responsive card grid (no media queries)

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}

Holy grail layout

.page {
  display: grid;
  grid-template:
    "header header header" auto
    "nav    main   aside"  1fr
    "footer footer footer" auto
    / 200px 1fr 200px;
  min-height: 100vh;
}

Center anything

.center {
  display: grid;
  place-items: center;
  min-height: 100vh;
}

Pancake stack (header, content, footer)

.stack {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

Responsive sidebar

.layout {
  display: grid;
  grid-template-columns: minmax(150px, 25%) 1fr;
  gap: 24px;
}

/* Stack on mobile */
@media (max-width: 768px) {
  .layout { grid-template-columns: 1fr; }
}

RAM (Repeat, Auto, Minmax)

/* The most useful responsive pattern */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 16px;
}
/* min() prevents overflow on small screens */