Faire en sorte que les lignes s'étendent sur plusieurs colonnes

Les lignes de la grille CSS peuvent être configurées pour englober plusieurs colonnes à l'aide des propriétés de grille appropriées. Voici comment y parvenir :

Placement basé sur la ligne :

L'approche la plus courante consiste à utiliser le placement basé sur la ligne, où vous spécifiez les lignes de début et de fin de colonne :

grid-column: 1 / 4;  // Spans columns 1, 2, and 3

Zone de grille explicite :

Utilisez la propriété grid-area, qui définit explicitement les cellules occupées :

grid-area: 1 / 2 / span 3;  // Spans 3 columns from row 1, column 2

Valeurs négatives :

Les valeurs négatives dans la colonne de grille ou dans la colonne de départ de la grille peuvent être utilisées pour la droite. placement à gauche : 

grid-column: -2 / -1;  // Spans the last 2 columns

Column Line Clamping :

Cette technique utilise le serrage de ligne pour étendre le point final de la ligne à l'espace disponible :

grid-column: auto;
grid-column-end: 100%;

Dimensionnement automatique avec minimum :

Le dimensionnement automatique avec une largeur minimale garantit que la ligne occupe au moins un nombre spécifié de colonnes : 

grid-column: auto;
min-width: 400px;

Exemple :

Pour étendre la ligne de navigation sur toutes les colonnes :

  

    ...
  
  ...

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

.main-nav {
  grid-column: 1 / -1;  // Spans all columns
}

En appliquant l'une de ces méthodes, vous pouvez étendre des lignes ou des colonnes sur plusieurs colonnes dans CSS Grid, créant ainsi des mises en page complexes et flexibles.