CSS Grid Layout Cheat Sheet

This page provides a visual cheat sheet for CSS Grid layout, including core properties for grid containers and grid items, along with practical layout examples.

Grid Container

Property	Value	Description
`display`	`grid`	Define the element as a grid container
`grid-template-columns`	`100px 1fr`	Define the width of columns
`grid-template-rows`	`100px 1fr`	Define the height of rows
`grid-template-areas`	`header header` `sidebar main` `footer footer`	Define the grid by naming areas
`grid-column-gap`	`10px`	Define the gap between columns
`grid-row-gap`	`10px`	Define the gap between rows
`grid-gap`	`10px 20px`	Define gaps between rows and columns simultaneously
`justify-items`	`start`	Align grid items horizontally within grid cells
`align-items`	`start`	Align grid items vertically within grid cells
`justify-content`	`start`	Align the entire grid horizontally within the grid container
`align-content`	`start`	Align the entire grid vertically within the grid container

Grid Items

Property	Value	Description
`grid-column`	`1 / 3`	Define columns spanned by the item
`grid-row`	`1 / 3`	Define rows spanned by the item
`grid-area`	`header`	Place grid items by naming areas
`justify-self`	`start`	Align an individual grid item horizontally within its cell
`align-self`	`start`	Align an individual grid item vertically within its cell
`grid-column-start`	`1`	Define the starting column line
`grid-column-end`	`3`	Define the ending column line
`grid-row-start`	`1`	Define the starting row line
`grid-row-end`	`3`	Define the ending row line

Media Query Example

@media (max-width: 600px) {
  .container {
    grid-template-columns: 1fr;
  }
}

Other Examples

Two-column layout

.container {
  display: grid;
  grid-template-columns: 1fr 2fr;
}

Three-column layout

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

Vertical centering

.container {
  display: grid;
  align-items: center;
}

Horizontal centering

.container {
  display: grid;
  justify-items: center;
}