Grid

CSS Гриды (они же сетки или CSS Grid) устанавливаются с помощью значения grid в свойстве display; вы можете определить колонки и строки в сетке с помощью свойств grid-template-columns и grid-template-rows соответственно.

Сетка, которую вы создаёте, используя эти свойства, является явной сеткой.

If you place content outside of this explicit grid, or if you are relying on auto-placement and the grid algorithm needs to create additional row or column tracks to hold grid items, then extra tracks will be created in the implicit grid. The implicit grid is the grid created automatically due to content being added outside of the tracks defined.

В примере ниже отображена точная сетка из трёх колонок и двух рядов. The third row on the grid is an implicit grid row track, formed due to their being more than the six items which fill the explicit tracks.

* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 100px;
}

<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
  <div>Seven</div>
  <div>Eight</div>
</div>