Advertisement
  1. Web Design
  2. CSS Grid Layout

Mise en pages CSS Grid : Utilisez les zones de grille

by
Read Time:4 minsLanguages:
This post is part of a series called Understanding the CSS Grid Layout Module.
CSS Grid Layout: Fluid Columns and Better Gutters
CSS Grid Layout: Going Responsive With auto-fill and minmax()

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

Une chose que nous avons mentionné, mais qui n’a pas encore été couverte correctement dans cette série est grid areas. Jusqu'à présent nos éléments de grille sont chacun contenus dans une cellule de grille unique, mais nous pouvons réaliser des mise en pages plus utiles en rupture au-delà de ces limites. Jetons un coup d’oeil !

Définition des zones de grille

Voici la grille sur laquelle nous avons travaillé : neuf éléments de grille automatiquement placés dans trois colonnes égales, trois rangées égales, réparties par gouttières de 20px.

Actuellement nos éléments n'ont seulement que des styles de couleur, mais nous allons revenir à ce que nous avons appris dans le premier tutoriel et ajouter quelques règles de grid-column et grid-row, cette fois avec quelque chose en plus :

Dans la présente déclaration raccourcie de grid-column nous pouvons utiliser efficacement grid-column-start et grid-column-end, indiquant le point de départ à la ligne 1 de la grille et le point d'arrêt à la ligne 3 de la grille.

grid lines
Lignes de grille 1 et 3

Voici ce que cela nous donne ; le premier élément s’étend maintenant sur deux cellules, poussant les autres éléments à droite et en bas selon l’algorithme auto-placement de la grille.

La même chose peut être faite avec les lignes, ce qui nous donnerait une plus grande zone en haut à gauche de notre grille.

Enjambement de cellules

En utilisant ce qui est peut-être une syntaxe plus facile, nous pouvons transformer grid-column-end par span. Avec span, nous ne sommes pas obligés de spécifier où la zone s'arrête, plutôt définir sur combien de plages l’élément devrait être réparti :

Ce qui nous donne le même résultat final, mais si nous devions changer où nous voulons que l'élément commence nous ne serions plus obligés de changer la fin.

Dans la démo suivante vous pouvez voir que nous avons vidé la mise en pages en enlevant quatre des éléments. Nous avons déclaré le positionnement sur deux de nos éléments : le premier s’étend sur deux colonnes et deux lignes, tandis que le quatrième commence à la colonne 3, ligne 2 et s'étend vers le bas entre deux plages :

Les éléments restants remplissent l’espace disponible automatiquement. Cela met en évidence parfaitement comment une mise en pages de grille n’a pas à tenir compte de l’ordre source des éléments.

Remarque : il y a beaucoup de situations où l’ordre source devrait absolument refléter la présentation – n’oubliez pas l’accessibilité.

Zones nommées

Utiliser les méthodes de numérotation que nous avons décrites jusqu’ici fonctionne très bien, mais Grid Template Areas peut rendre la définition des mise en pages encore plus intuitive.

Plus précisément, elles permettent de nommer les zones sur la grille. Avec ces zones nommées, nous pouvons les référencer (au lieu de numéros de ligne) afin de positionner nos éléments. Nous allons coller à notre démo actuelle pour l’instant et l’utiliser pour nous faire une mise en pages de départ comprenant :

  • header
  • main content
  • sidebar
  • footer

Nous définissons ces zones sur notre conteneur de grille, presque comme si nous les faisions sortir :

Positionner les éléments

Maintenant, nous portons notre attention sur les éléments, pour les règles grid-column et grid-row en faveur de grid-area :

Notre premier point est insérée dans le header, s’étendant à travers toutes les trois colonnes du header. Notre deuxième élément est affecté à la zone main content, le troisième devient notre sidebar et le quatrième notre footer. Et ceux-ci ne doivent pas suivre l'ordre source soit – .item-4 pourrait tout aussi bien être placé dans la zone du header.

Comme vous pouvez le voir, ceci rend la mise en pages d'une page beaucoup plus facile. En effet, alors que nous sommes dans l’ambiance pour représenter visuellement nos grilles, pourquoi ne pas aller encore plus loin et utiliser les emojis ? !

Imbrication de Grid Areas

Une page web donnée contient toutes sortes de composants imbriqués, nous allons donc voir comment cela fonctionne avec Grid.

Quand nous déclarons un conteneur de grille display: grid; seul ses descendants directs deviennent des éléments de grille. Le contenu que nous ajoutons à ces éléments enfants sera entièrement non-affecté par Grid à moins que nous disions plus précisément le contraire.

Dans notre exemple, nous allons ajouter .item-5 et .item-6 et .item-7 dans le balisage, les imbriquant dans .item-2.

Alors maintenant, nous devons déclarer notre .item-2 également comme un conteneur de grille, mettant en place sa grille avec deux lignes et deux colonnes.

Nous pouvons utiliser les noms « header », « article » et « sidebar » encore une fois ici ; Il n’y a pas de confusion, parce que tout reste en contexte. Ces zones de grille ne s’appliquent qu’à la grille dans .item-2.

Conclusion

Pour résumer ce dont nous avons parlé :

  1. grid-column nous offre une façon abrégée de définir où un élément commence et se termine.
  2. Nous pouvons aussi utiliser le mot clé span pour rendre nos règles plus flexibles.
  3. grid-template-areas nous donne le pouvoir de nommer nos zones de grille (même en utilisant les emojis si l’envie nous en prend).
  4. Nous pouvons également imbriquer les grilles en déclarant les éléments de la grille comme display: grid; et en suivant le même processus.

Une fois de plus, nous avons appris quelques aspects utiles de la spécification CSS Grid Layout, et nous nous rapprochons de plus en plus de cas d’utilisations du monde réel ! Dans le prochain tutoriel, nous allons examiner certaines mise en pages plus complexes et voir comment le responsive design s’intègre dans l’équation.

Ressources utiles

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.