Pourquoi mes zones de grille CSS ne sont-elles pas correctement disposées ?

Grille CSS : les zones de grille ne sont pas disposées correctement

Dans les systèmes de grille CSS, la propriété grid-template-areas peut être utilisée pour définir zones nommées dans une grille. Cependant, des problèmes peuvent survenir lors de l'utilisation de cette propriété, entraînant une disposition incorrecte des zones de grille.

Problème :

Lors de la définition des zones de grille à l'aide de la propriété grid-template-areas , une disposition inattendue se produit. Le code suivant illustre le problème :

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "logo faq" "about-us";
}

Ce code définit une grille 2x2 avec deux zones nommées "logo" et "faq" dans la première ligne, et une zone nommée "à propos de nous" dans la seconde. rangée. Cependant, la mise en page ne correspond pas à la configuration prévue.

Solution :

Le problème provient du nombre incorrect de colonnes dans la propriété grid-template-areas. Chaque chaîne de la propriété doit avoir le même nombre de colonnes que celui défini dans grid-template-columns. Dans ce cas, la propriété ne spécifie qu'une seule colonne, alors que la grille est définie avec deux colonnes.

Pour résoudre le problème, la zone « à propos de nous » doit être divisée en deux colonnes à l'aide d'une chaîne supplémentaire :

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "logo faq" "about-us about-us";
}

Avec cet ajustement, les zones de grille seront disposées correctement, en s'alignant sur la configuration prévue.

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!