Grid Container

Grid container can be created by declaring display: grid or display: inline-grid on an element. As soon as we do this, all direct children of that element become grid items

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-gap: 10px;
  background-color: red;
  padding: 15px;
}

Grid Container-properties

The grid-template-columns property defines the line names and track sizing functions of the grid columns.

.grid-container {
  display: grid;
  grid-template-columns: 90px 250px auto 50px;
  grid-gap: 15px;
  background-color: red;
  padding: 15px;
}

The grid-template-rows CSS property defines the line names and track sizing functions of the grid rows.

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: 90px 250px;
  grid-gap: 15px;
  background-color: red;
  padding: 15px;
}

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

.grid-container {
  display: grid;
  justify-content: space-evenly;
  grid-template-columns: 60px 60px 60px; /*Make the grid smaller than the container*/
  grid-gap: 15px;
  background-color: red;
  padding: 15px;
}

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

.grid-container {
  display: grid;
  height: 500px;
  align-content: center;
  grid-template-columns: auto auto auto;
  grid-gap: 15px;
  background-color: yellow;
  padding: 15px;
}