Pourquoi la disposition de ma zone de grille CSS est-elle incorrecte ?

Dépannage des zones de grille dans la grille CSS

Lorsque vous travaillez avec CSS Grid, il est crucial de s'assurer que les zones de grille sont correctement disposées. Cependant, parfois, les choses ne se passent pas comme prévu. Explorons un problème courant où les zones de grille semblent incorrectes.

Disposition incorrecte des zones de grille

Considérez le code suivant :

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

.logo {
  background-color: blue;
  grid-area: logo;
}

.faq {
  background-color: red;
  grid-area: faq;
}

.aboutUs {
  background-color: cyan;
  grid-area: about-us;
}

Dans cet exemple , nous voulons créer une grille avec deux colonnes et deux lignes. Cependant, la zone « à propos de nous » ne s'affiche pas comme prévu.

Solution

Le problème se pose car les valeurs de chaîne dans la propriété grid-template-areas doivent avoir le même nombre de colonnes que la grille elle-même. Dans ce cas, la deuxième ligne ne comporte qu'une seule colonne, tandis que les première et deuxième zones sont affectées à des colonnes distinctes.

Pour résoudre ce problème, nous pouvons ajouter une autre colonne à la deuxième ligne :

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

Maintenant, les zones sont correctement aménagées comme prévu. N'oubliez pas que lorsque vous utilisez la propriété grid-template-areas, il est essentiel de s'assurer que les valeurs de chaîne s'alignent sur la configuration de la grille pour une disposition correcte de la grille.

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!