Grille à 12 segments

Un autre classique: la grille à 12 segments. Vous pouvez écrire rapidement des grilles en CSS avec la fonction repeat(). Si vous utilisez repeat(12, 1fr); pour les colonnes du modèle de grille, vous obtenez 12 colonnes chacune correspondant à 1fr.

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

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

Maintenant que vous disposez d'une grille à 12 colonnes, vous pouvez placer des éléments enfants sur la grille. Une façon de le faire serait de les placer à l'aide de lignes de grille. Par exemple, grid-column: 1 / 13 s'étendra de la première à la dernière (13e) et s'étendra sur 12 colonnes. grid-column: 1 / 5; couvrirait les quatre premiers.

Vous pouvez également utiliser le mot clé span. Avec span, vous définissez la ligne de départ, puis le nombre de colonnes à occuper à partir de ce point. Dans ce cas, grid-column: 1 / span 12 équivaut à grid-column: 1 / 13 et grid-column: 2 / span 6 à grid-column: 2 / 8.

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

HTML

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

CSS

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