CSS Grid Container

Try it Yourself »

Grid Container

To make an HTML element a grid container, you can set the display property to grid or inline-grid.

The grid container contains grid items organized in columns and rows.

grid-template-columns Property

The grid-template-columns property defines the number of columns in the grid layout and can also set the width of each column.

The property value is a space-separated list where each value defines the width of the corresponding column.

If you want the grid layout to include 4 columns, you need to set the width for 4 columns. If all columns have the same width, you can set it to auto.

Here is an example setting a 4-column grid layout:

Example

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

Note: If you have more than 4 grid items in a 4-column grid, the layout will generate a new row to place the additional items.

The grid-template-columns property can also be used to specify the width of each column.

Example

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

grid-template-rows Property

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

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

Example

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

justify-content Property

The justify-content property is used to align the grid within the container, setting how space is distributed between and around elements along the flex container's main axis (or grid row axis).

Note: The total width of the grid must be less than the width of the container for the justify-content property to take effect.

justify-content detailed content reference: CSS justify-content Property

Example

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

Example

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

Example

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

Example

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

Example

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

Example

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

align-content Property

The align-content property is used to set the vertical alignment of the grid elements within the container.

Note: The total height of the grid elements must be less than the height of the container for the align-content property to take effect.

Example

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

Example

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

Example

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

Example

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

Example

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

Example

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

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