Grid

CSS grid es definido usando el valor grid en la propiedad display; puedes definir columnas y filas en tu diseño grid, con las propiedades grid-template-rows y grid-template-columns .

El grid que configures usando estas propiedades es definido como la grilla explícita (explicit grid).

Si colocas contenido fuera de esta cuadrícula explícita, o si confías en la ubicación automática y el algoritmo de cuadrícula necesita crear tracks (en-US) de filas o columnas adicionales para contener grid items, luego se crearán pistas adicionales en la cuadrícula implícita. La cuadrícula implícita es la cuadrícula creada automáticamente debido al contenido que se agrega fuera de las pistas definidas.

En el siguiente ejemplo, he creado una grilla explícita de tres columnas y dos filas. La tercera fila en la cuadrícula es una pista de la fila de la grilla implícita, formada debido a que son más de seis los elementos que llenan las pistas 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;
}

.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>