Comment étendre une ligne sur toutes les colonnes de la grille CSS ?

Agrandir la ligne sur toutes les colonnes d'une grille CSS : ajuster l'étendue

Lorsque vous étendez votre ligne de navigation sur toutes les colonnes d'une grille CSS, assurez-vous de spécifier les lignes de colonne appropriées. Initialement, vous aviez défini :

<code class="css">grid-column: 1 / 2;</code>

Ceci définit la ligne à étendre de la ligne 1 de la colonne de grille à la ligne 2, couvrant une seule colonne.

Solution 1 : Extension jusqu'à la Dernière ligne

Pour que la ligne s'étende sur toutes les colonnes, vous pouvez ajuster la propriété grid-column pour l'étendre jusqu'à la dernière ligne :

<code class="css">grid-column: 1 / 3;</code>

Cela indique que la ligne doit commencer à la première ligne de colonne et se terminer à la troisième (dernière) ligne de colonne.

Solution 2 : Utiliser des valeurs négatives

Vous pouvez également utiliser des valeurs négatives pour référence à partir de la fin de la grille :

<code class="css">grid-column: 1 / -1;</code>

Ici, -1 représente la dernière ligne de colonne, ce qui fait que la ligne s'étend sur toutes les colonnes.

Code ajusté :

<code class="css">body {
  margin: 0;
  padding: 0;
}

.container {
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 4fr 1fr;
  grid-template-rows: 50px auto;
}

.mainnav {
  grid-column: 1 / -1;    /* Adjusted to span all columns */
  grid-row: 1 / 2;        /* Adjustment for explicit grid */
  background-color: #5eccc0;
}

...</code>

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!