CSS GRID CONTAINER

To make an element a Grid Container, display:grid or display:inline-grid property needs to be added on that HTML element.

There are multiple grid properties using which the layout of the grid container and the grid items can be managed. Some of the properties are discussed in this section.

Justify Content Property

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

It accepts the following values:

• start
• end
• center
• space-around
• space-between
• space-evenly

justify-content : start

Aligns the grid content towards the start:

.grid {
  display:grid;
  grid-template-columns: auto auto auto auto;
  justify-content:start;
}

Output:

justify-content : end

Aligns the grid content towards the end:

.grid {
  display:grid;
  grid-template-columns: auto auto auto auto;
  justify-content:end;
}

Output:

justify-content : center

Aligns the grid content at the center:

.grid {
  display:grid;
  grid-template-columns: auto auto auto auto;
  justify-content:center;
}

Output:

justify-content : space-between

Adds space between all the grid items:

.grid {
  display:grid;
  grid-template-columns: auto auto auto auto;
  justify-content:space-between;
}

justify-content : space-evenly

Adds equal space between and around all the grid items:

.grid {
  display:grid;
  grid-template-columns: auto auto auto auto;
  justify-content:space-evenly;
}

justify-content : space-around

Adds space around all the grid items:

.grid {
  display:grid;
  grid-template-columns: auto auto auto auto;
  justify-content:space-around;
}

Align Content

The align-content property is used to vertically align the grid content. Using this property, the whole grid is aligned along the column axis.

It accepts the following values:

• start
• end
• center
• space-between
• space-around
• space-evenly

align-content : start

Aligns the content towards the start of the grid:

.grid {
  display:grid;
  grid-template-columns: auto auto auto auto;
  height:350px;
  align-content:start;
}

align-content : end

Aligns the content towards the end of the grid:

.grid {
  display:grid;
  grid-template-columns: auto auto auto auto;
  height:350px;
  align-content:end;
}

align-content : center

Aligns the content at the vertical center of the grid:

.grid {
  display:grid;
  grid-template-columns: auto auto auto auto;
  height:350px;
  align-content:center;
}

align-content : space-between

Aligns the content in such a way that all items have spaces in between:

.grid {
  display:grid;
  grid-template-columns: auto auto auto auto;
  height:350px;
  align-content:space-between;
}

align-content : space-around

Adds spaces around all the grid items:

.grid {
  display:grid;
  grid-template-columns: auto auto auto auto;
  height:350px;
  align-content:space-around;
}

align-content : space-evenly

Adds spaces evenly around all the grid items:

.grid {
  display:grid;
  grid-template-columns: auto auto auto auto;
  height:350px;
  align-content:space-evenly;
}