CSS Grid Cheatsheet

Grid Container Properties

display - Defines a grid container.

Example:

.container {
  display: grid;
}

grid-template-columns - Specifies the size of each column in the grid.

Example:

.container {
  grid-template-columns: 100px 200px 150px;
}

grid-template-rows - Specifies the size of each row in the grid.

Example:

.container {
  grid-template-rows: 50px 100px;
}

grid-template-areas - Defines named grid areas for the layout.

Example:

.container {
  grid-template-areas:
    'header header header'
    'sidebar main main'
    'footer footer footer';
}
.header {
  grid-area: header;
}
.sidebar {
  grid-area: sidebar;
}
.main {
  grid-area: main;
}
.footer {
  grid-area: footer;
}

grid-template - Shorthand property to set grid-template-rows and grid-template-columns in one declaration.

Example:

.container {
  grid-template: 100px 200px / 1fr 2fr;
}

grid-gap - Sets the gap (space) between grid cells.

Example:

.container {
  grid-gap: 10px 20px;
}

Grid Item Properties

grid-column-start - Specifies the start position of a grid item along the horizontal axis.

Example:

.item {
  grid-column-start: 2;
}

grid-column-end - Specifies the end position of a grid item along the horizontal axis.

Example:

.item {
  grid-column-end: span 3;
}

grid-row-start - Specifies the start position of a grid item along the vertical axis.

Example:

.item {
  grid-row-start: row2;
}

grid-row-end - Specifies the end position of a grid item along the vertical axis.

Example:

.item {
  grid-row-end: span row3;
}

grid-column - Shorthand property for grid-column-start and grid-column-end.

Example:

.item {
  grid-column: 2 / span 3;
}

grid-row - Shorthand property for grid-row-start and grid-row-end.

Example:

.item {
  grid-row: row2 / span row3;
}

grid-area - Specifies a grid item's size and location within the grid.

Example:

.item {
  grid-area: 2 / 1 / span 3 / span 2;
}

Property	Description
display: grid	Makes an element a grid container.
grid-template-columns:	Defines the number and width of columns.
grid-template-rows:	Defines the number and height of rows.
grid-template:	Sets the number and size of columns and rows in a single declaration.
grid-template-areas:	Defines the area of each grid item.
grid-column:	Specifies the column in which a grid item is placed.
grid-row:	Specifies the row in which a grid item is placed.
grid-column-start:	Specifies the start column for a grid item.
grid-column-end:	Specifies the end column for a grid item.
grid-row-start:	Specifies the start row for a grid item.
grid-row-end:	Specifies the end row for a grid item.
grid-auto-columns:	Specifies the default width of columns.
grid-auto-rows:	Specifies the default height of rows.
grid-auto-flow:	Specifies the direction in which grid items are laid out.
grid-gap:	Specifies the gap between grid items.

Example:

// Makes the div a grid container
div {
  display: grid;
}

// Defines the number and width of columns
div {
  grid-template-columns: 1fr 1fr;
}

// Defines the number and height of rows
div {
  grid-template-rows: 1fr 1fr;
}

// Defines the area of each grid item
div {
  grid-template-areas:
    "header header"
    "main main"
    "footer footer";
}

// Specifies the column in which a grid item is placed
div {
  grid-column: 1;
}

// Specifies the row in which a grid item is placed
div {
  grid-row: 1;
}

// Specifies the start column for a grid item
div {
  grid-column-start: 1;
}

// Specifies the end column for a grid item
div {
  grid-column-end: 2;
}

// Specifies the start row for a grid item
div {
  grid-row-start: 1;
}

// Specifies the end row for a grid item
div {
  grid-row-end: 2;
}

// Specifies the default width of columns
div {
  grid-auto-columns: 100px;
}

// Specifies the default height of rows
div {
  grid-auto-rows: 100px;
}

// Specifies the direction in which grid items are laid out
div {
  grid-auto-flow: row;
}

// Specifies the gap between grid items
div {
  grid-gap: 10px;
}