Pourquoi ma disposition de grille CSS ne fonctionne-t-elle pas comme prévu avec « grid-template-areas » ?

Dépannage du placement des zones de grille dans la grille CSS

Dans CSS Grid, la propriété grid-template-areas attribue des zones spécifiques de la grille aux éléments. Cependant, lorsque nous travaillons avec cette propriété, nous pouvons rencontrer des problèmes avec la mise en page qui n'apparaît pas comme prévu.

Une erreur courante survient lorsque les chaînes fournies n'ont pas le même nombre de colonnes que celui défini dans grid-template-columns . Dans ce cas, la mise en page n'apparaîtra probablement pas correctement.

Prenons l'exemple suivant :

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

Dans cet exemple, la propriété grid-template-areas définit deux lignes et une colonne , mais la propriété grid-template-columns définit deux colonnes. Cette incohérence entraînera un comportement inattendu.

Pour résoudre ce problème, la propriété grid-template-areas doit avoir le même nombre de colonnes que la propriété grid-template-columns. Dans ce cas, nous pouvons modifier la propriété grid-template-areas comme suit :

grid-template-areas: "logo faq" "about-us about-us";

Cela garantit que la mise en page s'alignera correctement avec les colonnes définies.

N'oubliez pas, lorsque vous travaillez avec grid-template-areas, le nombre de zones définies doit correspondre au nombre de lignes et de colonnes spécifié dans les propriétés grid-template-rows et grid-template-columns, respectivement.

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!