Access Code School (ACS), École du numérique pour tous en Bourgogne Franche-Comté, Auvergne Rhône-Alpes, Centre Val de Loire et Nouvelle-Aquitaine

Blog

CSS Grid Layout

CSS Grid Layout fournit à CSS un système de grille bi-dimensionnelle. Concrètement Grid permet de diviser le contenu d’une page sous forme d’une grille comme le font certains framework, mais à mon avis, avec plus de flexibilité et plus de contrôle.
Cerise sur le gâteau, Grid est un outil fait pour travailler avec Flexbox ou avec lui-même (des grilles dans les cellules de la grille parent).

Il faut signaler des problèmes de compatibilité avec d’anciennes versions de certains navigateurs (résultats Can I use).

The Bootstrap gravedigger…

Positionnement de la grille

CSS grid Layout permet de modéliser une grille en définissant le nombre de colonnes et de rangées la composant ainsi que leurs gouttières (espaces séparant les cellules sur les deux dimensions).
Ne voulant pas vous saturer une fois de plus avec de la technique, je me contenterais de vous présenter des exemples visuels.


schema grille de base

Structure basique de gestion de grille

 

Remarquez les multiples unités de valeurs utilisables, pixels, pourcentage, automatique.

 


visualisation gouttières

Gestion des gouttières (gap)

 

et même des outils dans les navigateurs pour vous aider…


exemple outils de grille Mozilla Developer

Outil de gestion de grille Mozilla dev.

 

Gestion 2D des cellules de la grille

Bon je sais ce que vous allez me dire, avec des interfaces comme ça on peut utiliser des Flexbox, mais le découpage du container est grandement facilité avec l’utilisation de Grid Layout.


Interface avec grille bi-dimensionnelle

Interface grille 2D

 

On peut donc paramétrer la largeur et la hauteur de chaque cellules et même les faire se chevaucher, combiné avec z-index ça ouvre d’autres possibilités.


exemple superposition cellules CSS Grid

La zone 2 recouvre une partie de la zone 1

 

 


exemple superposition tracks CSS Grid Layout

La zone 1 reprend le dessus avec un z-index

 

 

exemple superposition de cellule avec CSS Grid Layout

Plusieurs cellules superposées avec z-index.

Il est ou le layout…

Modularité de la grille CSS Grid Layout

Avant tout je vais vous parler d’une nouvelle unité de mesure crée pour CSS Grid Layout. Il s’agit de fr qui symbolise une fraction de l’espace vide dans la grille.

L’ordre des cellules dans le container Grid peut être spécifié mais aussi modifié, cela permet d’adapter plus facilement l’interface à la résolution, en clair il est plus facile d’ajuster l’interface en fonction du mode de visualisation, vertical ou paysage, sur tablette et smartphone.


UI vertical layout

interface affichage vertical

 

 


UI horizontal layout

interface affichage « paysage »

 

Comme Flexbox, Grid Layout se plie bien au contraintes du Responsive, il est possible de définir chaque parties de sa grille comme des ‘items‘, et de modifier leur ordre durant l’appel aux Media queries.

Vivement demain…

Pour conclure

Il est trop tôt pour utiliser CSS Grid Layout, qui est toujours en phase de développement.
Malgré tout si vous vous donnez la peine d’essayer et de tester sous différents navigateurs, vous verrez que CSS Grid Layout est déjà bien intégré.
Par contre le passage au validateur W3C CSS va générer des erreurs sur certaines instructions.

Pour connaitre les détails de la mise en oeuvre, je vous laisse consulter les sources de cet article.

Ici un site laboratoire des possibilités d’affichage de Grid Layout.

Je vous laisse en espérant une intégration rapide ce cette technologie.

 

Auteur : Yannick KHEMAJA

Pour en savoir plus et mes sources:

La cascade.
W3C.
MDN.
Alsacréation.

About the Author

Ajouter un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *