CSS Grid Layout Cheat Sheet

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

Grid Container

Property	Value	Description
`display`	`grid`	Defines the element as a grid container
`grid-template-columns`	`100px 1fr`	Defines the column widths
`grid-template-rows`	`100px 1fr`	Defines the row heights
`grid-template-areas`	`header header` `sidebar main` `footer footer`	Defines the grid by naming areas
`grid-column-gap`	`10px`	Defines the gap between columns
`grid-row-gap`	`10px`	Defines the gap between rows
`grid-gap`	`10px 20px`	Defines the gap between rows and columns simultaneously
`justify-items`	`start`	Defines the horizontal alignment of grid items within cells
`align-items`	`start`	Defines the vertical alignment of grid items within cells
`justify-content`	`start`	Defines the horizontal alignment of the entire grid within the container
`align-content`	`start`	Defines the vertical alignment of the entire grid within the container

Grid Items

Property	Value	Description
`grid-column`	`1 / 3`	Defines the columns spanned by the item
`grid-row`	`1 / 3`	Defines the rows spanned by the item
`grid-area`	`header`	Places a grid item by a named area
`justify-self`	`start`	Defines horizontal alignment of a single item within its cell
`align-self`	`start`	Defines vertical alignment of a single item within its cell
`grid-column-start`	`1`	Defines the start column line for the item
`grid-column-end`	`3`	Defines the end column line for the item
`grid-row-start`	`1`	Defines the start row line for the item
`grid-row-end`	`3`	Defines the end row line for the item

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;
}