Zones de modèle de grille

Lorsque vous utilisez CSS Grid Layout, vous pouvez toujours placer des éléments d'une ligne de grille à une autre. Cependant, il existe une autre manière de décrire votre mise en page, qui est de nature visuelle. Dans cet article, nous allons apprendre à utiliser la propriété grid-template-areas pour définir le placement sur la grille et découvrir comment fonctionne réellement la propriété.

Au cas où vous auriez manqué les articles précédents de ce , vous pouvez les trouver ici:

Décrire la disposition avec grid-template-areas

La propriété grid-template-areas accepte une ou plusieurs chaînes comme valeur . Chaque chaîne (entre guillemets) représente une ligne de votre grille. Vous pouvez utiliser la propriété sur une grille que vous avez définie à l'aide de grille-modèle-lignes et grille-modèle-colonnes ou vous pouvez créer votre mise en page auquel cas toutes les lignes seront

La propriété et la valeur suivantes décrivent une grille avec quatre zones, chacune s'étendant sur deux pistes de colonne et deux pistes de ligne. Une zone est étendue sur plusieurs pistes en répétant le nom dans toutes les cellules que vous souhaitez qu'elle couvre:

 grid-template-areas: "one one two two"
                     "un un deux deux"
                     "trois trois quatre quatre"
                     "trois trois quatre quatre";

Les éléments sont placés dans la mise en page en étant nommés avec un retrait à l'aide de la propriété grid-area . Par conséquent, si je veux placer un élément avec une classe de test dans la zone de la grille nommée one j'utilise le CSS suivant:

 .test {
  zone de grille: une;
}

Vous pouvez le voir en action dans l'exemple CodePen illustré ci-dessous. J'ai quatre articles (avec les classes un à quatre); ceux-ci sont affectés à la zone de grille appropriée à l'aide de la propriété grid-area et s'affichent donc sur la grille dans les cases appropriées.

Si vous utilisez Firefox Grid Inspector, vous pouvez voir les noms des zones et les lignes de la grille démontrant que chaque élément s'étend sur deux lignes et deux colonnes – toutes

Règles d'utilisation grille- template-areas

Il existe quelques règles lors de la création d'une disposition de cette manière. Enfreindre les règles rendra la valeur invalide et donc votre mise en page ne se fera pas. La première règle est que vous devez décrire une grille complète c'est-à-dire que chaque cellule de votre grille doit être remplie.

Si vous voulez laisser une cellule (ou des cellules) comme espace vide, vous faites ceci en insérant un . ou des séries telles que ...

Par conséquent, si je modifie la valeur de grid-template-area comme suit:

 grid-template-area: "one one two two"
                     "un un deux deux"
                     ".. quatre quatre"
                     "trois trois quatre quatre";

J'ai maintenant deux cellules sans contenu. Le troisième élément n'apparaît que dans la dernière ligne de la grille.

Vous ne pouvez définir que chaque zone une fois ce qui signifie que vous ne pouvez pas utiliser cette propriété pour copier du contenu à deux endroits sur la grille! Par conséquent, la valeur suivante serait invalide et entraînerait l'ignorance de la propriété entière car nous avons dupliqué la zone trois :

 grid-template-areas: "un un trois trois"
                     "un un deux deux"
                     "trois trois quatre quatre"
                     "trois trois quatre quatre";

Vous ne pouvez pas créer une zone non rectangulaire, donc la propriété ne peut pas être utilisée pour créer une zone en forme de «L» ou de «T» – ce qui rend également la valeur suivante non valide:

 grid-template-areas : "un un deux deux"
                     "un un un"
                     "trois trois quatre quatre"
                     "trois trois quatre quatre";

Formatage des chaînes

J'aime afficher la valeur de grid-template-areas comme je l'ai ci-dessus (chaque chaîne représentant une ligne en dessous de la ligne précédente). Cela me donne une représentation visuelle de ce que sera la disposition.

Pour aider à cela, il est utile d'ajouter des caractères d'espace supplémentaire entre chaque cellule, et également d'utiliser plusieurs .

Dans la valeur ci-dessous, j'ai utilisé plusieurs espaces blancs entre des mots plus petits, et également plusieurs . caractères de sorte que les cellules vides s'alignent:

 grid-template-areas: "one one two two"
                     "un un deux deux"
                     "..... ..... quatre quatre"
                     "trois trois quatre quatre";

Cela dit, il est également tout à fait valide d'avoir toutes les chaînes sur une seule ligne, afin que nous puissions écrire notre exemple comme suit:

 grid-template-areas: "one one two two" "one one two two "" trois trois quatre quatre "" trois trois quatre quatre ";

Explication grid-template-areas Et grid-area

La raison pour laquelle chaque zone doit être un rectangle complet est qu'elle doit avoir la même forme que vous pourrait créer en utilisant un placement basé sur une ligne. Si nous nous en tenons à notre exemple ci-dessus, nous pourrions faire cette disposition avec des lignes de grille comme dans le prochain CodePen. Ici, j'ai créé ma grille comme avant. Cette fois, cependant, j'ai utilisé des lignes de grille pour créer le positionnement à l'aide du début grille-colonne-début grille-colonne-fin grille-ligne-début et grille-fin de ligne propriétés.

Remarque : Si vous lisez mon article précédent « Comprendre la grille CSS: Grid Lines », vous saurez qu'il est possible d'utiliser grid-area comme raccourci pour déclarer les quatre lignes à

Cela signifie que nous pourrions également créer notre mise en page avec l'ordre de lignes suivant:

• grille-ligne-début
• grille-colonne-début
• grille-ligne-fin [19659044] grille-colonne-fin [19659047] .one {
    surface de la grille: 1/1/3/3;
  }

  .deux {
    surface de la grille: 1/3/3/5;
  }

  .Trois {
    surface de la grille: 3/1/5/3;
  }

  .four {
  surface de la grille: 3/3/5/5;
}


  La propriété grid-area est intéressante car elle peut accepter des numéros de ligne et des noms de ligne. Il est également important de comprendre la manière dont il se comporte dans chaque mode.

  Utilisation de grid-area Avec des numéros de ligne

  Si vous utilisez la propriété grid-area avec

  Si vous manquez des valeurs – fournissant donc 1, 2 ou 3 numéros de ligne – les valeurs manquantes sont définies sur auto ce qui signifie que le La zone s'étendra sur 1 piste (c'est la valeur par défaut). Ainsi, le CSS suivant placerait un élément grid-row-start: 3 avec toutes les autres valeurs définies sur auto, par conséquent, l'élément serait automatiquement placé dans la première piste de colonne disponible et s'étendrait sur une piste de ligne et une piste de colonne.

   surface de grille: 3;
  

  Utilisation de grid-area Avec des identifiants

  Si vous utilisez un identifiant (qui est ce que la zone nommée est appelée dans Grid Layout), la propriété grid-area est également prend quatre lignes. Si vous avez nommé des lignes sur votre grille comme décrit dans « Comprendre la grille CSS: créer un conteneur de grille », vous pouvez utiliser ces lignes nommées de la même manière que les lignes numérotées.

  Cependant, que se passe-t-il lorsque vous manquez certaines lignes est différent de lorsque vous utilisez des identifiants et non des nombres.

  Ci-dessous, j'ai créé une grille avec des lignes nommées et utilisé grid-area pour placer un élément (manquant la finale valeur):

   .grid {
    affichage: grille;
    grille-modèle-colonnes:
        [one-start three-start] 1fr 1fr
        [one-end three-end two-start four-start] 1fr 1fr [two-end four-end];
    grille-modèle-lignes:
      [one-start two-start] 100px 100px
      [one-end two-end three-start four-start] 100px 100px [three-end four-end] ;;
  }
  
  .deux {
    zone de la grille: deux départs / deux départs / deux extrémités;
  }
  

  Cela signifie qu'il nous manque le nom de ligne pour grille-colonne-fin . La spécification indique que dans cette situation, grille-colonne-fin devrait utiliser une copie de grille-colonne-début . Si grille-colonne-fin et grille-colonne-début sont identiques, alors la ligne de fin est rejetée, et essentiellement la valeur est définie sur auto, donc nous couvrons une piste comme dans la version numérotée.

  La même chose se produit si nous manquons la troisième valeur grid-row-end ; il devient identique à grid-row-start et devient donc auto .

  Jetez un œil à l'exemple suivant de CodePen sur la façon dont chaque zone de grille est utilisé et comment cela modifie alors la disposition de l'élément:

  Voir le stylo Identifiants manquants dans la zone de grille par Rachel Andrew ( @rachelandrew ) sur CodePen .

  Ceci explique alors pourquoi grid-area fonctionne avec un identifiant de valeur unique représentant un nom de zone.

  Lorsque nous créons une zone nommée avec la propriété grid-template-areas le bord de chaque zone peut être référencé par un nom de ligne identique au nom de zone que vous avez utilisé. Dans notre cas, nous pourrions prendre notre zone nommée une et placer notre article en utilisant les lignes nommées comme suit:

   .one {
    grille-début de ligne: un;
    grille-ligne-fin: un;
    grille-colonne-début: un;
    grille-ligne-fin: un;
  }
  

  Si la ligne est une ligne -début alors une ligne se résout à l'extrémité de début de la colonne ou de la ligne. S'il s'agit d'une ligne -fin alors une se résout en ligne de fin de la colonne ou de la ligne.

  Cela signifie que lorsque nous disons surface de grille: un nous avons omis les trois dernières valeurs pour la sténographie grille-zone ; ils finissent tous par être des copies de la première valeur – tous dans notre cas deviennent un et l'élément est placé exactement comme avec notre utilisation à long terme.

  La façon dont la dénomination fonctionne dans Grid Layout est intelligente et permet certaines choses intéressantes, sur lesquelles j'ai écrit dans mes articles précédents " Nommer les choses dans la disposition de grille CSS " et " Modèles de conception éditoriale avec grille CSS et colonnes nommées ".

  Superposition Éléments lors de l'utilisation de grid-template-area

  Un seul nom peut occuper chaque cellule lors de l'utilisation de grid-template-area cependant, vous pouvez toujours ajouter des éléments supplémentaires à la grille après avoir fait votre principale mise en page de cette façon. Vous pouvez utiliser les numéros de ligne comme d'habitude.

  Dans l'exemple CodePen ci-dessous, j'ai ajouté un élément supplémentaire et l'ai positionné en utilisant le positionnement par ligne sur les éléments déjà positionnés:

  Voir le stylo Placement d'un élément avec des numéros de ligne par Rachel Andrew ( @rachelandrew ) sur CodePen .

  Vous pouvez également utiliser des noms de lignes définis lors de la création de vos colonnes ou lignes habituelles. Encore mieux, vous aurez des noms de ligne créés par la formation des zones. Nous avons déjà vu comment obtenir quatre noms de ligne avec le nom de la zone. Vous obtenez également une ligne sur le bord de début de chaque zone avec -start ajouté au nom de la zone, et une ligne à l'extrémité de chaque zone avec -fin ajouté.

  Par conséquent, la zone nommée one a des lignes de bord de départ nommées one-start et des lignes de bord d'extrémité nommées one-end .

  Vous pouvez ensuite utilisez ces noms de ligne implicites pour placer un élément sur la grille. Cela peut être utile si vous redéfinissez la grille à différents points d'arrêt tant que vous souhaitez toujours que l'élément placé apparaisse après un certain nom de ligne.

  Voir le stylet Placement d'un élément avec des noms de ligne implicites par Rachel Andrew ( @rachelandrew ) sur CodePen .

  Utilisation de zones de modèle de grille dans la conception réactive

  Je travaille souvent avec la création de composants dans une bibliothèque de composants et je trouve que l'utilisation de grid-template-area peut être utile pour voir exactement à quoi ressemblera un composant à partir du CSS. Il est également très simple de redéfinir le composant à différents points d'arrêt en redéfinissant la valeur de grid-template-areas parfois en plus de modifier le nombre de pistes de colonne disponibles.

  Dans le CSS ci-dessous, j'ai défini une disposition de colonne unique pour mon composant. Ensuite, à une largeur minimale de 600 pixels, je redéfinis le nombre de colonnes ainsi que la valeur de grid-template-areas afin de créer une mise en page à deux colonnes. La bonne chose à propos de cette approche est que quiconque regarde ce CSS peut voir comment la mise en page fonctionne!

   .wrapper {
    couleur de fond: #fff;
    rembourrage: 1em;
    affichage: grille;
    écart: 20px;
    zones de modèle de grille:
      "HD"
      "bd"
      "Dakota du Sud"
      "ft";
  
  }
  
  @media (min-width: 600px) {
    .wrapper {
      grille-modèle-colonnes: 3fr 1fr;
      zones de modèle de grille:
        "hd hd"
        "bd sd"
        "ft ft";
    }
  }
  
  header {grid-area: hd; }
  article {grid-area: bd; }
  côté {grille-zone: sd; }
  footer {grid-area: ft; }
  

  Accessibilité

  Vous devez être conscient lors de l'utilisation de cette méthode qu'il est très facile de déplacer les choses et de provoquer le problème de déconnecter l'affichage visuel de l'ordre source sous-jacent . Quiconque tabule autour du site, ou qui regarde l'écran tout en ayant le contenu parlé, utilisera l'ordre dans lequel les choses sont dans la source. En déplaçant l'affichage de cet ordre, vous pourriez créer une expérience très confuse et déconnectée. N'utilisez pas cette méthode pour déplacer les choses sans vous assurer également que la source est dans un ordre raisonnable et correspondant à l'expérience visuelle.

  Résumé

  C'est le point bas sur l'utilisation de la grille-modèle-zone et grille-zone pour créer des dispositions. Si vous n'avez jamais utilisé cette méthode de mise en page auparavant, essayez. Je trouve que c'est une belle façon d'expérimenter des mises en page et de l'utiliser souvent lors du prototypage d'une mise en page – même si pour une raison ou une autre, nous utiliserons finalement une méthode différente pour la version de production.

  Débordement et perte de données en CSS [19659031] CSS est conçu pour garder votre contenu lisible. Explorons les situations dans lesquelles vous pourriez rencontrer un débordement dans vos conceptions Web et comment CSS a évolué pour créer de meilleures façons de gérer et de concevoir autour de quantités inconnues de contenu. Lire l'article →

  (il)