Conseil rapide : Nommez vos lignes CSS Grid, juste au cas où

French (Français) translation by Henri Lotin (you can also view the original English article)

Dans toute CSS Grid chaque ligne a un numéro d’index auquel nous pouvons faire référence pour placer les éléments de la grille. Cependant, nous pouvons également nommer chacune de ces lignes de la grille, rend plus facile de travailler avec et de maintenir nos mise en pages de la grille. Jetons un coup d’oeil !

Grid arrive

La réponse la plus courante pour un tutoriel sur Grid est « mais quand je peux utiliser cela ? » et c’est une bonne question. Le fait est : Grid est en train d'arriver, et il sera bientôt là.

« CSS Grid va être pris en charge par défaut dans Chrome et Firefox en mars 2017. » – Eric Meyer

Si vous n’avez pas encore jeté un coup d’oeil, c’est le moment !

Numéros de ligne de grille

Lorsque nous déclarons une grille, chaque ligne reçoit un numéro d’index :

Remarque : Sauf si la disposition est définie avec direction : rtl; ces numéros commencent en haut à gauche de la grille, faisant ensuite leur chemin vers le bas à droite.

Nous pouvons faire référence à ces numéros pour placer les éléments de la grille :

.item {
  grid-column: 2;
  grid-row: 3;
}

Dans cet exemple, notre élément .item est positionné en commençant sur la ligne 2 et ligne de colonne 3 :

Noms de ligne de grille explicites

Avec des grilles plus complexes, vous pouvez imaginer que tout référencement par numéros pourrait devenir un peu confus. Pour cette raison, le module de Grid permet de nommer explicitement nos lignes quand nous déclarons nos lignes et colonnes de grille.

Nous allons utiliser un exemple comme ceux que nous avons utilisé tout au long de cette série. Voici notre déclaration de base de grille 3×3 :

.grid-1 {
  display: grid;
  grid-template-columns: 100px auto 100px;
  grid-template-rows: 60px 130px 50px;
  grid-gap: 20px;
}

Maintenant nous pouvons emballer nos valeurs de colonne et de ligne avec les noms de ligne (ce que diable nous voulons), à l’aide de crochets :

.grid-1 {
  display: grid;
  grid-template-columns: [start] 100px [centre-start] auto [last-column-start] 100px [finish];
  grid-template-rows: [header-start] 60px [main-start] 130px [main-end] 50px [row-end];
  grid-gap: 20px;
}

Nous pouvons maintenant positionner des éléments avec des noms, au lieu de chiffres :

.item {
  grid-column: centre-start;
  grid-row: header-start;
}

Quelques conseils :

Ces noms peuvent être adaptés à vos propres besoins descriptifs, alors pensez logiquement à ce qui vous aidera à reconnaître et à mémoriser les zones de la grille.
Les numéros de ligne d'origine restent en fonctionnement, donc vous pouvez toujours les utiliser.
Vous pouvez déclarer plusieurs noms pour une seule ligne, par exemple : [main-end footer-start row-5] etc..
Même si vous nommez vos lignes de grille, vous n’êtes pas obligé de les utiliser, donc c’est une bonne habitude « juste au cas où » à adopter.

Noms de ligne de grille implicites

Quand nous faisons délibérément des choses, comme nommer les lignes de la grille, ceci signifie être explicite. Quand quelque chose est sous entendu, mais non directement déclaré, elle est dénommé comme étant implicite. Nous avons couvert l’attribution explicite de noms aux lignes de la grille, mais il y a aussi des circonstances où les lignes sont nommées implicitement.

Vous vous souvenez d’un précédent tutoriel qu’il est possible de définir des zones de grille.

CSS

CSS Grid Layout: Using Grid Areas

Ian Yates

Nous pourrions définir nos zones de grille comme ceci :

.grid-1 {
    /* ..existing styles */
     
    grid-template-areas:    "header header header"
                            "main main sidebar"
                            "footer footer footer";
}

Ce qui nous donne ce qui suit :

Nommer un zone de grille header automatiquement attribue des noms aussi à ses lignes de démarcation. Les lignes de rangée autour de lui deviennent header-start et header-end et même les lignes de deux colonnes aussi header-start et header-end. Il en va de même pour les autres zones, qui dont les lignes sont nommées main-start, main-end, sidebar-start et ainsi de suite.

Remarque : Regarder les choses dans l’ordre inverse, ajouter explicitement les lignes nommées dans le même format (header-start et header-end) va créer une zone de grille nommée header.

Nous pouvons utiliser ces noms de ligne, tout comme nous l'avons fait précedemment, pour positionner des éléments. Et encore une fois, ils existent en plus de tous les noms que vous définissez vous-même, et les numéros de ligne d’index original.

Fin de la ligne

C’est tout pour cette astuce ! N’oubliez pas : prenez l’habitude de nommer vos lignes et zones pour une maintenance et une gestion plus facile de la grille.