Cuadrícula de 12 intervalos

Otro clásico es la cuadrícula de 12 intervalos. Puedes escribir cuadrículas con rapidez en CSS con la función repeat(). Si usas repeat(12, 1fr); para las columnas de la plantilla de cuadrícula, obtendrás 12 columnas cada una de las 1fr.

.parent {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.child-span-12 {
  grid-column: 1 / 13;
}

Ahora tienes una cuadrícula de seguimiento de 12 columnas, puedes colocar elementos secundarios en la cuadrícula. Una forma de hacerlo sería colocarlos usando líneas de cuadrícula. Por ejemplo, grid-column: 1 / 13 abarcaría desde la primera línea hasta la última (13) y 12 columnas. grid-column: 1 / 5; abarcaría las primeras cuatro.

Otra forma de escribir esto es con la palabra clave span. Con span, estableces la línea de inicio y, luego, la cantidad de columnas que deseas abarcar desde ese punto de partida. En este caso, grid-column: 1 / span 12 sería equivalente a grid-column: 1 / 13, y grid-column: 2 / span 6 sería equivalente a grid-column: 2 / 8.

.child-span-12 {
  grid-column: 1 / span 12;
}

 <div class="parent">
  <div class="span-12 section coral">Span 12</div>
  <div class="span-6 section green">Span 6</div>
  <div class="span-4 section yellow">Span 4</div>
  <div class="span-2 section blue">Span 2</div>
</div>

        .parent {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.span-12 {
  grid-column: 1 / span 12;
}

.span-6 {
  grid-column: 1 / span 6;
}

.span-4 {
  grid-column: 4 / span 4;
}

.span-2 {
  grid-column: 3 / span 2;
}

/* centering text */
.section {
  display: grid;
  place-items: center;
  text-align: center
}