Astuce nommez vos lignes de grille CSS, juste au cas où

Dans toute grille CSS, chaque ligne a un numéro d'index auquel on peut faire référence pour placer des éléments de grille. Cependant, nous pouvons également nommer chacune de ces lignes de grille, ce qui facilite le travail et la maintenance de nos dispositions de grille. Nous allons jeter un coup d'oeil!

La grille arrive

La réponse la plus fréquente à tout tutoriel sur la grille est «mais quand puis-je l'utiliser?» Et c'est une bonne question. Le fait est: grille est à venir, 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 ne l'avez pas encore regardé, c'est le moment!

Numéros de lignes de grille

Lorsque nous déclarons une grille, chaque ligne se voit attribuer un numéro d'index: 

Remarque: Sauf si la mise en page est définie avec direction: rtl;, ces chiffres commencent en haut à gauche de la grille, puis en bas à droite. 

Nous pouvons référencer ces numéros pour placer des éléments de grille:

.item grille-colonne: 2; rangée de grille: 3; 

Dans cet exemple notre .article l'élément est positionné à partir de la ligne de colonne 2 et de la ligne 3:

Noms de lignes de grille explicites

Avec des grilles plus complexes, vous pouvez imaginer que tout référencer par des chiffres peut être un peu déroutant. Pour cette raison, le module Grid nous permet de nommer explicitement nos lignes lorsque nous déclarons nos colonnes et nos lignes de grille..

Prenons un exemple comme ceux que nous avons utilisés 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; intervalle de grille: 20px; 

Maintenant, nous pouvons encapsuler nos valeurs de colonne et de ligne avec des noms de ligne (quel que soit le choix souhaité), en utilisant des crochets:

.grid-1 display: grid; grid-template-columns: [début] 100px [centre-début] auto [dernière-colonne-début] 100px [fin]; grid-template-rows: [header-start] 60px [main-start] 130px [main-end] 50px [row-end]; intervalle de grille: 20px; 

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

.item grid-column: center-start; grid-row: header-start; 

Quelques pointeurs:

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

Noms de lignes de grille implicites

Lorsque nous faisons délibérément des choses, comme nommer des lignes de grille, on dit que explicite. Lorsque quelque chose est impliqué, mais pas directement indiqué, on parle de implicite. Nous avons couvert explicitement la dénomination des lignes de grille, mais il existe également des circonstances dans lesquelles des lignes sont nommées implicitement..

Vous vous souvenez peut-être d'un précédent tutoriel qu'il est possible de définir des zones de grille.

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

.grid-1 / *… styles existants * / grid-template-areas: "en-tête en-tête" "barre latérale principale" "pied de page pied de page pied de page"; 

Cela nous donne les éléments suivants:

Nommer une zone de grille entête attribue automatiquement des noms à ses quatre lignes de démarcation. Les lignes qui l'entourent deviennent en-tête et en-tête, et de même les deux colonnes deviennent également en-tête et en-tête. Il en va de même pour les autres zones, auxquelles sont attribués des noms de lignes. départ principal, extrémité principale, sidebar-start etc.

Remarque: En regardant les choses à l'envers, en ajoutant explicitement les lignes nommées dans le même format (en-tête et en-tête) créera une zone de grille nommée de entête. 

Nous pouvons utiliser ces noms de lignes comme précédemment, pour positionner des éléments. Et encore une fois, ils existent en plus des noms que vous définissez vous-même et les numéros d'index de ligne d'origine.

Fin de la ligne

Voilà pour ce conseil rapide! N'oubliez pas: prenez l'habitude de nommer vos lignes et vos zones pour faciliter la gestion et la maintenance du réseau.