CSS Grid Cheatsheet

CSS Grid Cheatsheet

Basic grid and tracks

display: grid on the parent. Define columns with grid-template-columns. 1fr means one fraction of the free space. Use repeat(3, 1fr) for three equal columns. gap adds space between cells.

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
}

Fixed column plus flexible: first column 200px, second takes the rest.

.layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 1rem;
}

Template areas

Name regions and assign each child to a name. Easier to read than line numbers when the layout is complex.

.page {
  display: grid;
  grid-template-areas:
    "header header"
    "main   aside"
    "footer footer";
  grid-template-columns: 1fr 240px;
  grid-template-rows: auto 1fr auto;
}
.header { grid-area: header; }
.main   { grid-area: main; }
.aside  { grid-area: aside; }
.footer { grid-area: footer; }

Placing items by line numbers

Grid lines start at 1. grid-column: 1 / 3 means from line 1 to 3 (spans two columns). grid-column: span 2 spans two columns from where the item would normally sit.

.span-two { grid-column: span 2; }
.from-1-to-3 { grid-column: 1 / 3; }

Full shorthand: grid-area: row-start / col-start / row-end / col-end. Example: grid-area: 1 / 1 / 3 / 2 (rows 1–3, column 1).

Responsive columns without media queries

repeat(auto-fill, minmax(200px, 1fr)) creates as many columns as fit (each at least 200px) and shares space evenly. Resize the window and columns reflow.

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}

Add as many cards as you want. They wrap automatically.

Practical examples

Sidebar layout: narrow column plus content.

.app {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
}

Header, main, footer with main filling the middle:

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

12-column layout (like old frameworks). Items span as needed:

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
}
.grid-12 .span-4 { grid-column: span 4; }
.grid-12 .span-8 { grid-column: span 8; }

Card that spans two columns in an auto-fill grid: give that card grid-column: span 2 and make sure the grid has at least two columns (e.g. minmax(200px, 1fr) so two fit on most screens).

When to use Grid vs Flexbox. Use Flexbox for one-dimensional layouts: a row of items, or a column of items. Use Grid when you care about both rows and columns (e.g. a page with header, main, sidebar, footer, or a card grid where items sit in explicit columns). You can nest them: a Grid for the page, Flexbox for the nav bar inside the header.

Dashboard with named areas. Several regions (sidebar, header, main, widgets) in a fixed structure. Template areas make the layout readable.

.dashboard {
  display: grid;
  grid-template-areas:
    "sidebar header header"
    "sidebar main   widget1"
    "sidebar main   widget2";
  grid-template-columns: 200px 1fr 280px;
  grid-template-rows: auto 1fr 1fr;
  min-height: 100vh;
  gap: 1rem;
}
.dashboard .sidebar { grid-area: sidebar; }
.dashboard .header  { grid-area: header; }
.dashboard .main    { grid-area: main; }
.dashboard .w1      { grid-area: widget1; }
.dashboard .w2      { grid-area: widget2; }

Form in two columns. Labels in the first column, inputs in the second. Good for longer forms.

.form-grid {
  display: grid;
  grid-template-columns: 12ch 1fr;
  gap: 0.5rem 1rem;
  align-items: center;
}
.form-grid label { grid-column: 1; }
.form-grid input,
.form-grid button { grid-column: 2; }
/* full-width submit */
.form-grid button[type="submit"] { grid-column: 1 / -1; }

Use our CSS Color and Flexbox cheatsheets for more.