Griglia a 12 sezioni

Un altro classico: la griglia a 12 sezioni. Puoi scrivere rapidamente griglie in CSS con la funzione repeat(). Se utilizzi repeat(12, 1fr); per le colonne del modello di griglia, hai 12 colonne ciascuna di 1fr.

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

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

Ora che hai una griglia con 12 colonne, puoi inserire gli elementi secondari al suo interno. Un modo per farlo è posizionarli utilizzando le linee della griglia. Ad esempio, grid-column: 1 / 13 si estenderebbe dalla prima all'ultima (13°) e comprenderebbe 12 colonne. grid-column: 1 / 5; include i primi quattro.

In alternativa, puoi utilizzare la parola chiave span. Con span, puoi impostare la linea iniziale e poi il numero di colonne da comprendere da quel punto iniziale. In questo caso, grid-column: 1 / span 12 corrisponde a grid-column: 1 / 13, mentre grid-column: 2 / span 6 corrisponde 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
}