Comment faire en sorte que les lignes de la grille CSS s'étendent sur plusieurs colonnes ?

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, dans lequel vous spécifiez les lignes de début et de fin de colonne :

<code class="css">grid-column: 1 / 4;  // Spans columns 1, 2, and 3</code>

Zone de grille explicite :

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

<code class="css">grid-area: 1 / 2 / span 3;  // Spans 3 columns from row 1, column 2</code>

Valeurs négatives :

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

<code class="css">grid-column: -2 / -1;  // Spans the last 2 columns</code>

Serrage de la ligne de colonne :

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

<code class="css">grid-column: auto;
grid-column-end: 100%;</code>

Dimensionnement automatique avec minimum :

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

<code class="css">grid-column: auto;
min-width: 400px;</code>

Exemple :

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

<code class="html"><div class="container">
  <div class="main-nav">
    ...
  </div>
  ...
</div></code>

<code class="css">.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

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

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.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!