Container.md

< Previous     Next >

---

Note: if you cant read text on images below, either you are blind or you have dark mode on.

---

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.

grid-template-columns

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.

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

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

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

grid-template-rows

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:

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

justify-content

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

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

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

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

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

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

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

align-content

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

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

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

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

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

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

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