CSS Grid Cheat Sheet

A reference for CSS Grid, defining tracks with grid-template-columns and repeat, sizing with fr and minmax, gaps, grid-template-areas, and placing items across the grid.

A reference to CSS Grid, the two-dimensional layout model. Define rows and columns on the grid container, and place items on the grid with the item properties. Click any value to copy it.

Container properties

PropertyWhat it does
display: gridTurn an element into a grid container
grid-template-columns: 1fr 2frDefine columns (here, two tracks)
grid-template-rows: auto 1frDefine rows
repeat(3, 1fr)Repeat a track (repeat(auto-fit, minmax(200px, 1fr)) is responsive)
gap: 1remSpace between tracks (row-gap / column-gap)
grid-template-areasName grid cells for readable layouts
justify-items: centerAlign items in their cell along the row (align-items for the column)

Item properties

PropertyWhat it does
grid-column: 1 / 3Span an item from line 1 to line 3
grid-row: span 2Span two rows
grid-area: headerPlace an item in a named area
justify-self: endAlign one item in its cell along the row (align-self for the column)
order: 2Change placement order (default 0)

Tip: for a responsive card grid with no media queries, use grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)). The fr unit shares leftover space, so columns stretch and wrap as the viewport changes.

What this does

A CSS Grid cheat sheet covers defining tracks with grid-template-columns and repeat, sizing with fr and minmax, gaps, grid-template-areas, and placing items.

How to use it

  1. Browse by property.
  2. Find the value you need.
  3. Copy it with one tap.
  4. Paste it into your stylesheet.

Example

grid-template-columns: repeat(3, 1fr) makes three equal columns.

Sources & methodology

Last updated .

Frequently asked questions

Grid or Flexbox — when do I use which?

Use grid for two-dimensional layouts with aligned rows and columns, and Flexbox for one-dimensional rows or columns where items size themselves.

How do I make a responsive grid without media queries?

Use repeat(auto-fit, minmax(200px, 1fr)). Items flow onto as many columns as fit, then wrap and stretch as the viewport changes.

What is the fr unit?

fr is a fraction of the free space in the track. With grid-template-columns: 1fr 2fr, the second column gets twice the remaining width of the first after fixed sizes are taken out.