CSS Grid Container

1
2
3
4
5
6
7
8

Try It Yourself

Grid container

To make an HTML element act as a grid container, you must set display The property is set to grid or inline-grid.

The grid container is composed of grid items placed within columns and rows.

The grid-template-columns property

grid-template-columns This property defines the number of columns in the grid layout and can define the width of each column.

This value is a list separated by spaces, where each value defines the length of the corresponding column.

If you want the grid layout to contain 4 columns, specify the width of these 4 columns; if all columns should have the same width, set it to "auto".

Example

Generate a grid containing four columns:

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

Try It Yourself

Note:If there are more than 4 items in a 4-column grid, the grid will automatically add new rows and place these items in them.

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

Example

Set the sizes of these 4 columns:

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

Try It Yourself

The grid-template-rows property

grid-template-rows This property defines the height of each column.

1
2
3
4
5
6
7
8

Its value is a list separated by spaces, where each value defines the height of the corresponding row:

Example

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

Try It Yourself

The justify-content property

justify-content The property is used to align the entire grid within the container.

1
2
3
4
5
6
7
8

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

Example

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

Try It Yourself

Example

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

Try It Yourself

Example

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

Try It Yourself

Example

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

Try It Yourself

Example

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

Try It Yourself

Example

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

Try It Yourself

The align-content property

align-content The property is used to vertically align the entire grid within the container.

1
2
3
4
5
6
7
8

Note:The total height of the grid 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;
}

Try It Yourself

Example

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

Try It Yourself

Example

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

Try It Yourself

Example

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

Try It Yourself

Example

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

Try It Yourself

Example

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

Try It Yourself