This site is mobile accessible. Press the "Tap Here" button to use a smaller font-size. Tap Here!

Smartphone icons created by Freepik - Flaticon

16.2 Grid Container

Grid container

Grid Container

To make an HTML element behave as a grid container, you have to set the display property to grid or inline-grid. Grid containers consist of grid items, placed inside columns and rows.

The grid-template-columns Property

The grid-template-columns property defines the number of columns in your grid layout, and it can define the width of each column. The value is a space-separated-list, where each value defines the width of the respective column. If you want your grid layout to contain 4 columns, specify the width of the 4 columns, or "auto" if all columns should have the same width.

Example 1: The grid-template-columns property

Make a grid with 4 columns:

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
}

Note: If you have more than 4 items in a 4 columns grid, the grid will automatically add a new row to put the items in.

The grid-template-columns property can also be used to specify the size (width) of the columns.

Example 2: The grid-template-columns property part 2

Set a size for the 4 columns:

.grid-container {
  display: grid;
  grid-template-columns: 80px 200px auto 40px;
}

The grid-template-rows Property

The grid-template-rows property defines the height of each row.

The value is a space-separated-list, where each value defines the height of the respective row:

Example 3: The grid-template-rows property

.grid-container {
  display: grid;
  grid-template-rows: 80px 200px;
}

The justify-content Property

The justify-content property is used to align the whole grid inside the container.

Note: The grid's total width has to be less than the container's width for the justify-content property to have any effect.

Example 4: Using justify-content: space-evenly

.grid-container {
  display: grid;
  justify-content: space-evenly;
}

Example 5: Using justify-content: space-around

.grid-container {
  display: grid;
  justify-content: space-around;
}

Example 6: Using justify-content: space-between

.grid-container {
  display: grid;
  justify-content: space-between;
}

Example 7: Using justify-content: center

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

Example 8: Using justify-content: start

.grid-container {
  display: grid;
  justify-content: start;
}

Example 9: Using justify-content: end

.grid-container {
  display: grid;
  justify-content: end;
}

The align-content Property

The align-content property is used to vertically align the whole grid inside the container.

Note: The grid's total height has to be less than the container's height for the align-content property to have any effect.

Example 10: Using align-content: center

.grid-container {
  display: grid;
  height: 400px;
  align-content: center;
}

Example 11: Using align-content: space-evenly

.grid-container {
  display: grid;
  height: 400px;
  align-content: space-evenly;
}

Example 12: Using align-content: space-around

.grid-container {
  display: grid;
  height: 400px;
  align-content: space-around;
}

Example 13: Using align-content: space-between

.grid-container {
  display: grid;
  height: 400px;
  align-content: space-between;
}

Example 14: Using align-content: start

.grid-container {
  display: grid;
  height: 400px;
  align-content: start;
}

Example 15: Using align-content: end

.grid-container {
  display: grid;
  height: 400px;
  align-content: end;
}