1. Grid container properties

Display

/* Sets the element to a grid container. */
.container {
  display: grid;
}

Grid Template Columns

/* Defines the columns of the grid. */
.container {
  grid-template-columns: 100px 100px 100px;
}

Grid Template Rows

/* Defines the rows of the grid. */
.container {
  grid-template-rows: 100px 100px;
}

Grid Template Areas

/* Defines the areas of the grid. */
.container {
  grid-template-areas: 
    "header header"
    "sidebar content"
    "footer footer";
}

Gap

/* Specifies the size of the gap between grid items. */
.container {
  gap: 10px;
}

Justify Items

/* Aligns items along the inline (row) axis. */
.container {
  justify-items: center;
}

Align Items

/* Aligns items along the block (column) axis. */
.container {
  align-items: center;
}

Justify Content

/* Aligns the grid along the inline (row) axis. */
.container {
  justify-content: center;
}

Align Content

/* Aligns the grid along the block (column) axis. */
.container {
  align-content: center;
}