CSS Grid Cheat Sheet

New

Complete reference for CSS Grid layout with examples and common patterns

Container Properties

display

Defines the element as a grid container

Values:
gridinline-grid
display: grid;

grid-template-columns

Defines the columns of the grid

Values:
repeat()frpx%autominmax()
grid-template-columns: repeat(3, 1fr);

grid-template-rows

Defines the rows of the grid

Values:
repeat()frpx%autominmax()
grid-template-rows: 100px 200px;

grid-template-areas

Defines grid areas by referencing grid-area names

Values:
nonestring values
grid-template-areas: "header header header" "sidebar main main" "footer footer footer";

grid-gap

Shorthand for grid-row-gap and grid-column-gap

Values:
px%em
grid-gap: 20px;

justify-items

Aligns grid items along the inline (row) axis

Values:
startendcenterstretch
justify-items: center;

align-items

Aligns grid items along the block (column) axis

Values:
startendcenterstretch
align-items: center;

Item Properties

grid-column

Specifies which columns the item spans

Values:
start / endspan nauto
grid-column: 1 / 3;

grid-row

Specifies which rows the item spans

Values:
start / endspan nauto
grid-row: 1 / 2;

grid-area

Gives an item a name or specifies its location

Values:
namerow-start / col-start / row-end / col-end
grid-area: header;

justify-self

Aligns a grid item along the inline axis

Values:
startendcenterstretch
justify-self: end;

align-self

Aligns a grid item along the block axis

Values:
startendcenterstretch
align-self: center;

Common Patterns

12-Column Layout

Classic 12-column grid system

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
}

.col-1 { grid-column: span 1; }
.col-2 { grid-column: span 2; }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-6 { grid-column: span 6; }
.col-12 { grid-column: span 12; }

Holy Grail Layout

Header, sidebar, main content, and footer layout

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

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

Responsive Grid

Auto-fit grid that adapts to screen size

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

Masonry-like Layout

Grid with varying item heights

.masonry {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: 0;
  grid-template-rows: masonry;
  gap: 16px;
}

Tips & Best Practices

Use fr units for flexible columns that distribute available space

Combine minmax() with auto-fit for responsive grids

Use grid-template-areas for semantic layouts

Prefer gap over margins for spacing between grid items