Comment étendre la navigation dans la grille sur toute la largeur du site Web

L'anatomie de votre grille

Vous avez rencontré un problème où votre navigation (nav) ne s'étend pas sur toute la largeur de votre site Web, malgré la spécification du colonnes que vous souhaitez qu’il occupe. Pour comprendre le problème, décomposons la syntaxe que vous avez utilisée :

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

Cette notation définit les points de début et de fin de la colonne de la grille, se décomposant en :

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

Dans ce cas, il indique à la navigation (nav) de s'étendre de la première ligne de colonne de grille à la deuxième ligne de colonne de grille. Cependant, il y a une différence :

Votre grille comporte en fait trois lignes de colonnes, et non deux.

Comptage des lignes de grille : lignes de début et de fin

Dans Dans un système de grille, le nombre de lignes de colonnes/lignes est toujours égal au nombre de colonnes/lignes plus un. Cette ligne supplémentaire indique la fin de la grille.

Ajustement des spécifications de votre grille

Pour résoudre ce problème, vous pouvez ajuster les spécifications de votre grille pour qu'elles s'étendent sur toutes les colonnes :

Option 1 : Spécifiez la colonne de fin

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

Option 2 : Utiliser des valeurs négatives

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

Les valeurs négatives comptent à partir de la fin de la grille, donc "-1" représente la dernière ligne de colonne.

Faire le changement

Remplacez votre règle de grille-colonne d'origine par l'une des options ci-dessus :

<code class="css">.mainnav {
  grid-column: 1 / -1;
}</code>

Ce changement permettra à votre navigation (nav) de s'étendre sur toute la largeur de votre site Web.

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!