Grade

Uma grade no CSS é definida usando o valor grid da propriedade display; você pode definir colunas e linhas na sua grade usando as propridades grid-template-rows e grid-template-columns.

A grade que você define usando essas propriedades é descrita como uma grade explícita.

Se você colocar o conteúdo fora dessa grade explícita ou se estiver utilizando o posicionamento automático e o algoritmo da grade precisar criar linhas ou colunas adicionais tracks (en-US) para manter grid items, então serão criadas faixas extras na grade implícita. A grade implícita é a grade criada automaticamente devido ao conteúdo adicionado fora das faixas definidas.

No exemplo abaixo, criamos uma grade explícita de três colunas e duas linhas. A terceira linha da grade é uma faixa implícita de linha da grade, formada por serem mais do que os seis os itens que preenchem as faixas explícitas.

* {
  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;
}

css

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

html

<div class="wrapper">
  <div>Um</div>
  <div>dois</div>
  <div>três</div>
  <div>quatro</div>
  <div>cinco</div>
  <div>seis</div>
  <div>sete</div>
  <div>oito</div>
</div>

CSS Grid Layout Guide: Basic concepts of grid layout
Property reference