Attribution d'un nom à une grille CSS

Lorsque vous apprenez à utiliser la disposition de la grille pour la première fois, vous pouvez commencer par placer des éléments sur la grille par des numéros de ligne. Dans ce cas, il est nécessaire de surveiller où certaines lignes passent sur la grille et de se rappeler que la séquence de leurs nombres change en sens inverse si le site est affiché pour les langues écrites de droite à gauche.

Sur la base de ce système de lignes, des techniques fonctionnent qui permettent de nommer des lignes et même des zones de grille. L'utilisation de ces techniques vous permet de placer des éléments par nom et non par numéro. Dans cet article, j'examinerai en détail les différentes façons de nommer les lignes et les zones dans les dispositions de grille CSS , ainsi que certaines fonctionnalités intéressantes qu'elles créent.

---

Du traducteur:
Un article d'il y a deux ans (2017), mais il touche à la mécanique importante de la fonction CSS Grid, et semble donc utile et pertinent aujourd'hui.

Dénomination de ligne

Commençons par nommer les lignes de la grille. Dans l'exemple ci-dessous, il existe une grille avec six pistes de colonne explicites et une piste de ligne explicite. Les éléments sont placés sur la grille à l'aide de numéros de ligne.

.grid { display: grid; grid-gap: 20px; grid-template-rows: 20vh ; grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr; } .header { grid-row: 1; grid-column: 1 / -1; } .sidebar { grid-row: 2; grid-column: 1 / 3; } .content { grid-row: 2; grid-column: 3 / -1; } 

Si nécessaire, les noms de ligne peuvent être spécifiés entre crochets dans la liste des pistes. Il est important de se rappeler ici que vous nommez la ligne, pas la piste qui la suit. Après avoir nommé les lignes, vous pouvez utiliser leurs noms au lieu de nombres lors du positionnement des éléments sur la grille.

 .grid { display: grid; grid-gap: 20px; grid-template-rows: [header-start] 20vh [header-end] ; grid-template-columns: [sidebar-start] 1fr 2fr [sidebar-end] 1fr 2fr 1fr 2fr; } .header { grid-row: header-start; grid-column: 1 / -1; } .sidebar { grid-row: 2; grid-column: sidebar-start / sidebar-end; } 

Le nom peut être autre chose que le mot clé span . Pour des raisons que vous apprendrez plus loin dans cet article, nommer avec le suffixe -start pour les lignes de tête (peu importe qu'il s'agisse d'une ligne ou d'une ligne de colonne) et -end pour les -end est une bonne pratique. Le résultat doit être main-start et main-end ou sidebar-start et sidebar-end .

Assez souvent, la ligne de fin d'une partie de la grille et la ligne de départ de l'autre partie coïncident, mais ce n'est pas un problème, car les lignes peuvent avoir plusieurs noms. Vous pouvez spécifier des lignes de plusieurs noms en les ajoutant à travers un espace entre crochets.

 .grid { display: grid; grid-gap: 20px; grid-template-rows: [header-start] 20vh [header-end] ; grid-template-columns: [full-start sidebar-start] 1fr 2fr [sidebar-end main-start] 1fr 2fr 1fr 2fr [main-end full-end]; } .header { grid-row: header-start; grid-column: full-start / full-end; } .sidebar { grid-row: 2; grid-column: sidebar-start / sidebar-end; } .content { grid-row: 2; grid-column: main-start / main-end; } 

Cet exemple montre que vous n'avez pas à nommer chaque ligne de grille individuelle et que les numéros de ligne pouvant être utilisés en plus des noms sont toujours disponibles.

Codepen 1. Dénomination de ligne

Lignes du même nom.

Nous avons vu comment les lignes peuvent avoir plusieurs noms, mais il y a aussi des situations où plusieurs lignes ont le même nom. Cela se produit si vous utilisez la fonction repeat() et incluez des lignes nommées dans la liste des pistes. L'exemple suivant crée six lignes nommées, nommées alternativement col-a-start et col-b-start .

 .grid { display: grid; grid-gap: 20px; grid-template-columns: repeat(3, [col-a-start] 1fr [col-b-start] 2fr); } 

Si vous spécifiez col-a-start lors du positionnement d'un élément, il sera placé sur la première ligne rencontrée avec le nom col-a-start (qui dans l'exemple considéré serait la première ligne de la grille). Selon le même principe, si vous spécifiez col-b-start lors du positionnement d'un élément, il sera placé sur la deuxième ligne de la grille.

Si vous devez vous positionner sur les lignes suivantes, ajoutez un nombre après le nom pour indiquer sur quelle ligne de la ligne du même nom l'élément doit être placé

 .box3 { grid-row: 2; grid-column: col-a-start 2 / col-b-start 3; } 

Codepen 2. Lignes du même nom.

La spécification décrit ce comportement comme «la création d'un ensemble nommé de lignes de grille».

Enregistrement des noms de ligne lors de la reconstruction d'une grille adaptative

Utilisez les numéros de ligne ou leurs noms, vous décidez. En règle générale, les lignes peuvent être utiles dans les situations où vous souhaitez modifier la structure de la grille dans le cadre d'une requête multimédia. Au lieu de suivre sur quelle ligne vous placez les éléments à différents points de contrôle, il sera possible d'opérer avec des lignes nommées séquentiellement.

Dans l'exemple simple suivant, je définis des colonnes de grille pour un écran étroit, puis je les redéfinis avec une largeur de 550 pixels.

 .grid { display: grid; grid-gap: 20px; grid-template-rows: [header-start] 20vh [header-end]; grid-template-columns: [full-start ] 10px [sidebar-start main-start] 1fr [main-end sidebar-end] 10px [full-end]; } @media (min-width: 550px) { .grid { grid-template-columns: [full-start sidebar-start] 1fr 2fr [sidebar-end main-start] 1fr 2fr 1fr 2fr [main-end full-end]; } } 

Codepen 3. Nommer les choses: redéfinir la position des lignes nommées

Régions nommées

Avant cela, nous ne considérions que les lignes nommées, mais il y a une autre façon. Nous pouvons nommer des zones de grille.

Une région de grille est une région rectangulaire constituée d'une ou plusieurs cellules de grille. La zone est définie par quatre lignes de grille indiquant les lignes de début et de fin des colonnes et des lignes.


Nous nommons les zones de grille à l'aide de la propriété grid-template-areas . Cette propriété décrit la disposition sous la forme d'un tableau ASCII et est un ensemble de lignes, chacune décrivant une piste de ligne distincte de la grille.

 .grid { display: grid; grid-template-columns: repeat(3, 1fr 2fr) ; grid-template-areas: "head head head head head head" "side side main main main main" "foot foot foot foot foot foot"; } 

Les noms que nous utilisons dans les lignes de la propriété grid-template-areas sont attribués aux enfants directs de la grille à l'aide de la propriété grid-area . La valeur de cette propriété, lorsqu'elle est utilisée pour la dénomination, est ce que l'on appelle l'identifiant utilisateur , elle n'a donc pas besoin d'être placée entre guillemets.

 .header { grid-area: head; } .sidebar { grid-area: side; } .content { grid-area: main; } .footer { grid-area: foot; } 

Pour que la zone couvre plusieurs cellules lors de la description de la structure de la grid-template-areas l'aide de la propriété grid-template-areas , vous devez réenregistrer son identifiant plusieurs fois le long d'une ligne ou d'une colonne. La zone créée doit être un rectangle, les zones en forme de L et de T ne sont pas autorisées. Vous pouvez également créer une seule zone rectangulaire pour chaque nom - les zones déconnectées ne sont pas autorisées. La spécification note que:

"Les zones non rectangulaires ou déconnectées pourraient être autorisées dans les futures versions de ce module"
- Propriété grille-modèle-zones

Lorsque vous décrivez une grille, vous devez prendre soin de sa présentation complète, sinon l'annonce entière sera rejetée comme non valide. Cela signifie que chaque cellule de la grille doit être remplie.

 grid-template-areas: "head head head head head head" "side side main main main main" "foot foot foot foot foot foot"; } 

Étant donné que vous souhaiterez peut-être laisser certaines cellules du balisage vides, la spécification définit un symbole de point . ou une séquence de points sans espaces entre eux .... comme marqueur d'une cellule vide

 grid-template-areas: "head head head head head head" "side side main main main main" "....... ....... foot foot foot foot"; } 

Codepen 4. Régions nommées

Si vous n'avez pas encore téléchargé Firefox pour profiter de toutes les dernières fonctionnalités de Firefox DevTools Grid Inspector, je vous recommande de le faire lorsque vous travaillez avec des zones nommées


Démonstration des zones nommées dans le "Grid Inspector" du navigateur Firefox ( Ouvrir l'original )

Les lignes nommées forment des zones

Nous arrivons maintenant à la partie intéressante de toute cette fête de la dénomination. Vous vous souvenez peut-être que lorsque nous avons examiné les lignes nommées, j'ai suggéré d'utiliser un accord de fin de ligne qui définit le début de la zone à l'aide de -start , la fin de la zone à l'aide de -end . La raison en est que si vous nommez les lignes de cette façon, vous vous retrouvez avec une zone de grille avec ce nom et vous pouvez y placer un élément en définissant ce nom via la propriété grid-area .

Dans l'exemple suivant, pour les lignes et les colonnes, je nomme les lignes panel-start et panel-end . Cela me donnera une zone nommée appelée panneau. Si je la définit comme la valeur de la propriété grid-area pour un élément de la page, cela placera l'élément dans la zone définie par ces lignes

 .grid { display: grid; grid-gap: 20px; grid-template-columns: 1fr [panel-start] 2fr 1fr 2fr 1fr [panel-end] 2fr; grid-template-rows: 10vh [panel-start] minmax(200px, auto) 10vh [panel-end]; grid-template-areas: "head head head head head head" "side side main main main main" ".... .... foot foot foot foot"; } .panel { grid-area: panel; } 

Codepen 5. Zones formées de lignes nommées

Les lignes sont formées à partir des zones nommées

Nous pouvons également faire le contraire de ce qui est montré ci-dessus, en utilisant des lignes créées à partir de zones nommées. Chaque zone crée quatre lignes nommées en utilisant la même convention de suffixe que -end et -end . S'il existe une zone nommée appelée main , ses lignes de début et de fin et ses colonnes seront appelées main-start et main-end . Ces lignes nommées peuvent être utilisées pour positionner un élément.

Dans l'exemple suivant, je positionne le panneau en utilisant les noms de ces lignes générées automatiquement:

 .grid { display: grid; grid-template-areas: "head head head head head head" "side side main main main main" ".... .... foot foot foot foot"; } .panel { grid-column: main-start / main-end; grid-row: head-start / foot-end; } 

Codepen 6. Des lignes se forment à partir des zones nommées

Noms de ligne équivalents au nom de la région

En plus des lignes avec les -end et -end , des lignes sont créées pour les faces de n'importe quelle région de grille portant le nom de cette région. Ainsi, s'il existe une zone main , vous pouvez utiliser l'identifiant main comme valeur pour les propriétés grid-row-start ou grid-column-start , et le contenu sera localisé depuis le début de cette zone. Si vous avez utilisé cette valeur pour la propriété grid-row-end ou grid-column-end , la ligne de fin de cette zone est sélectionnée. Dans l'exemple ci-dessous, .panel élément .panel du début du main à la fin du main pour les colonnes et du début du main à la fin du foot pour les lignes

 .panel { grid-column: main; grid-row: main / foot ; } 

Codepen 7. Noms de ligne équivalents au nom de la région

Explication des propriétés de la zone de grille

Il est utile de connaître quelque chose sur la propriété grid-area . Essentiellement, ce que nous faisons lorsque nous utilisons grid-area avec un identifiant tel que main c'est comment nous décrivons les quatre lignes de la zone. Les valeurs valides pour la propriété grid-area sont également des numéros de ligne.

 .main { grid-area: 2 / 1 / 4 / 3; } 

Cela a le même effet que l'entrée:

 .main { grid-row-start: 2; grid-column-start: 1; grid-row-end: 4; grid-column-end: 3; } 

Quand tu demandes

 .main { grid-area: main; } 

Cela signifie en fait:

 .main { grid-area: main / main / main / main ; } 

La propriété grid-area se comporte un peu différemment lorsqu'un identifiant utilisateur est utilisé, plutôt qu'un numéro de ligne. Lorsque vous utilisez des numéros de ligne pour les valeurs initiales dans la propriété de grid-area , tout numéro de ligne de fin que vous ne spécifiez pas sera automatiquement défini sur auto , par conséquent, le positionnement automatique sera utilisé pour déterminer où placer l'élément.

Cependant, si vous utilisez un ID utilisateur et sautez certaines lignes, elles sont définies comme suit

Trois noms de ligne spécifiés

 .main { grid-area: main / main / main ; } 

Si vous spécifiez trois noms de ligne, il vous manque essentiellement une grid-column-end . Si grid-column-start est un identifiant utilisateur, le même identifiant est également défini pour grid-column-end . Comme nous l'avons déjà vu, la propriété -end utilisera la face d'extrémité de la main , donc si grid-column-start et grid-column-end définis avec le même nom, le contenu est étendu à toutes les colonnes de cette zone.

Deux noms de ligne spécifiés

 .main { grid-area: main / main ; } 

Lorsque seuls deux noms sont spécifiés, les lignes de départ des lignes et des colonnes sont définies. Si grid-column-start et / ou grid-row-start est un identifiant utilisateur, alors grid-column-end et grid-row-end sont respectivement définis sur la même valeur.

Un nom de ligne spécifié

 .main { grid-area: main ; } 

Définir un nom de ligne unique est exactement ce que vous faites lorsque vous définissez la zone de grille sur le nom principal de la zone. Dans ce cas, les quatre lignes sont définies sur cette valeur.

Remarque : Cela fonctionne à la fois pour les grid-column grid-row .

Cette méthode signifie en fait que vous pouvez désigner un ensemble de colonnes ou de lignes dans une grille pour placer un élément. Tout comme les valeurs de fin de la propriété grid-area sont définies sur les mêmes valeurs que les valeurs initiales (lorsqu'elles sont omises), les valeurs finales des propriétés grid-column et grid-row se comportent également. Cela signifie que vous pouvez placer l'élément entre les lignes de colonne de début et de fin de la zone main utilisant:

 .main { grid-column: main ; } 

Dans la grille Breaking Out with CSS expliquée, j'ai montré comment cette fonctionnalité est utilisée pour créer des modèles de conception utiles pour des zones de grande taille qui vont au-delà d'une zone de contenu limitée.

Une grille peut avoir plusieurs lignes nommées.

Tout ce qui précède signifie que la grille peut par conséquent contenir un grand nombre de lignes nommées. Dans la plupart des cas, vous ne devriez pas vous en soucier. Travaillez avec les lignes dont vous avez besoin et ignorez l'existence des autres.

Dénomination et propriétés abrégées de la grille et du modèle de grille

CSS Grid a deux abréviations qui vous permettent de définir de nombreuses propriétés de grille dans une syntaxe compacte. Personnellement, cela me semble assez difficile à percevoir. Lorsque j'en discute avec d'autres développeurs, les avis sont partagés: certains les aiment, d'autres préfèrent utiliser des propriétés distinctes. Comme dans le cas d'autres abréviations, il faut se rappeler que les valeurs des propriétés que vous n'utilisez pas seront réinitialisées à leur valeur d'origine

Abréviation de modèle de grille: création d'une grille explicite

Vous pouvez utiliser le raccourci grid-template pour définir toutes les propriétés d'une grille explicite en un seul endroit à la fois

 grid-template-columns grid-template-rows grid-template-areas 

Cela signifie que vous pouvez définir simultanément des lignes nommées et des zones nommées. Lorsque vous utilisez une propriété qui combine des zones et des lignes nommées, je déterminerais d'abord la valeur de la propriété grid-template-areas , comme décrit dans la section ci-dessus.

Ensuite, vous voudrez peut-être ajouter des noms de ligne. Ils sont placés au début et à la fin de chaque ligne de valeurs - n'oubliez pas que chaque ligne de valeurs représente une piste de ligne. Le ou les noms des chaînes doivent se trouver entre crochets, tout comme lors de la dénomination des lignes dans la propriété grid-template-rows , et doivent être en dehors des guillemets entourant la chaîne de valeurs qui définit la piste de ligne.

Dans l'exemple ci-dessous, j'ai nommé deux lignes: le panel-start vient après la ligne d'en-tête (deuxième ligne de la grille) et la panel-end va après la dernière ligne de pied de page (quatrième ligne de la grille avec trois pistes de ligne). J'ai également déterminé la taille de la piste de ligne pour les lignes nommées et non nommées en ajoutant un paramètre à la fin de la ligne de valeur décrivant cette piste de ligne

 .grid { display: grid; grid-gap: 20px; grid-template: " head head head head head head" 10vh [panel-start] "side side main main main main" minmax(200px, auto) ".... .... foot foot foot foot" 10vh [panel-end]; } 

S'il est également nécessaire de nommer les colonnes, nous ne pouvons pas le faire à l'intérieur de la ligne, nous devons donc ajouter le séparateur / , puis définir une liste de pistes de colonnes. Les lignes sont nommées comme si cette liste était la valeur de la propriété grid-template-columns .

 .grid { display: grid; grid-gap: 20px; grid-template: " head head head head head head" 10vh [panel-start] "side side main main main main" minmax(200px, auto) ".... .... foot foot foot foot" 10vh [panel-end] / [full-start ] 1fr [panel-start] 2fr 1fr 2fr 1fr [panel-end] 2fr [full-end]; } 

Dans cet exemple, que vous pouvez voir dans l'encadré ci-dessous, je crée un ensemble supplémentaire de lignes pour les lignes et les colonnes, ces lignes définissent une zone nommée panel , car j'ai utilisé la syntaxe panel-start et panel-end . De cette façon, je peux placer l'élément en définissant la valeur du panel de la propriété grid-area .

À première vue, cela semble plutôt incompréhensible. Donc, ici, nous créons une liste de colonnes qui s'alignent conformément à notre table ASCII définie ci-dessus. Facultativement, ajoutez des espaces entre les valeurs pour aligner la définition des template-areas template-columns et template-columns .

Codepen 8. Abréviation du modèle de grille

Abréviation de la grille: maillage implicite et explicite

La spécification suppose que si vous devez définir une grille implicite séparément, vous devez utiliser la propriété de grid abrégée au lieu du grid-template de grid-template . La grid abréviations réinitialise toutes les valeurs implicites que vous n'avez pas définies. Ainsi, il vous permet de définir et de réinitialiser les propriétés suivantes

 grid-template-columns grid-template-rows grid-template-areas grid-auto-columns grid-auto-rows grid-auto-flow 

Pour nos besoins, l'utilisation de l'abréviation de la grid sera identique à l'utilisation du grid-template , car nous définissons une définition de grille implicite. La seule différence sera la réinitialisation des propriétés grid-auto–* . L'abréviation de grid peut être utilisée soit pour définir la grille explicite et réinitialiser les propriétés implicites, soit pour définir la grille implicite et réinitialiser les propriétés explicites. Faire les deux en même temps n'a pas beaucoup de sens

 .grid { display: grid; grid-gap: 20px; grid: " head head head head head head" 10vh [panel-start] "side side main main main main" minmax(200px, auto) ".... .... foot foot foot foot" 10vh [panel-end] / [full-start ] 1fr [panel-start] 2fr 1fr 2fr 1fr [panel-end] 2fr [full-end]; } 

Remarque : Dans la version originale recommandée de la spécification CSS Grid, cette réduction réinitialise également les propriétés de l'espace entre les cellules grid-column-gap et grid-row-gap . Cependant, ce comportement a finalement été modifié. Les navigateurs mettent à jour ce comportement, mais au moment de la rédaction (octobre 2017), vous pouvez toujours rencontrer une situation où la valeur des propriétés de l' gap est réinitialisée à zéro lorsque la réduction est utilisée, vous devrez donc peut-être les redéfinir plus tard

Quelle approche utiliser?

Vous pouvez demander laquelle de toutes ces méthodes est la mieux utilisée pour une tâche spécifique? Il n'y a pas de règles strictes. Personnellement, j'aime utiliser grid-template-areas de grid-template-areas pour les composants lorsque je travaille dans ma bibliothèque de modèles. Il est pratique d’avoir la structure du composant juste devant vos yeux directement dans les grid-template-areas CSS et grid-template-areas ce qui permet d’essayer facilement différentes options de mise en page lors de son test. J'ai trouvé qu'en raison d'un mouvement aussi simple des cellules maillées, il est important de s'assurer que l'ordre visuel et logique des cellules composantes n'est pas perturbé. Les visiteurs qui interagissent avec votre site à l'aide du clavier, en basculant entre les éléments avec le bouton Tab, sélectionneront les éléments dans l'ordre dans lequel ils sont définis dans le balisage. N'oubliez pas de réorganiser la mise en page dès que vous décidez de la manière la plus appropriée d'afficher votre contenu. Pour en savoir plus sur ce problème, je vous suggère de lire l'article CSS Grid Layout and Accessibility .

Conventions de dénomination de base

Pour résumer l'article, je récapitulerai quelques règles de base à garder à l'esprit lors de la dénomination des lignes ou des zones de la grille CSS:

Dénomination de ligne:

1. Vous pouvez utiliser presque tous les noms (à l'exception du mot clé span), mais vous pouvez également utiliser la zone créée à partir de ces lignes si leurs noms se terminent par -end et -end
2. Les lignes peuvent avoir plusieurs noms définis entre crochets et séparés par un espace
3. Plusieurs lignes peuvent avoir le même nom; si vous en avez besoin, ajoutez simplement le numéro de la ligne nécessaire après le nom afin

Zones de dénomination:

1. Lors de la définition d'une zone à l'aide de grid-template-areas , la forme de la zone doit être rectangulaire
2. Lorsque vous utilisez la propriété grid-template-areas , chaque piste de ligne de la grille est représentée sous la forme d'une chaîne de valeurs et s'affiche entre guillemets
3. Chaque cellule doit être remplie. Si, par conception, vous souhaitez laisser certaines cellules vides, utilisez un point pour cela . ou ellipses ... pas d'espaces
4. Les régions nommées créent des lignes avec le même nom que la région, mais avec les -end et -end . Ils peuvent être utilisés pour positionner des éléments.