CSS Grid - une vraie révolution

Marc

Marc


Jun 6th 2017 in code

Grid est un ensemble de propriétés CSS qui permet la disposition d'éléments dans une grille sur une page web. Cet article vous résume mes dernières semaines d'apprentissage, d'expérimentations et de ressources.

Passion du CSS

Le CSS et ce qu'il permet m'a toujours passioné. Mon premier site en ligne, le siecle passé, ne connaissait pas cette technologie mais plutôt <font color="red">. Le CSS s'est ensuite imposé pour la mise en page et les animations. Il s'est professionalisé il y a quelques années avec les styleguides, les frameworks et les pré-processeur et est souvent detesté ou adoré mais il évolue à vitesse folle.

Pourquoi vous parler de CSS Grid

Les premières spécifications de CSS Grid ont été proposées par Microsoft en 2011. Très sceptique quant à l'accessibilité et à un retour à la mise en page à la <table>, j'ai commencé à m'y intéresser seulement en 2014 après le talk de Rachel Andrew à la Frontend Conference de Zurich.

Début avril de cette année, nous sommes passés d'un support quasi-inexistant à un support complet sur les dernières versions de Firefox, Chrome, Safari et Edge! Je vous en parle car c'est vraiment le moment de s'y mettre et parce que je m'amuse beaucoup avec CSS Grid ces derniers temps.

Le principe de base de CSS Grid

Comme son nom l'indique, on parle d'une grille en 2 dimensions. Les lignes et les colonnes ainsi que leur comportement sont définis entièrement en CSS. Comme pour flexbox, appliquer la propriété display: grid; sur un élément implique que toutes les balises enfants directs de notre éléments sont les "cellules" de notre grille. Au niveau de la définition de la grille tout est paramétrable : nombre de colonnes, tailles des goutières, distribution des tailles par colonnes et par lignes. Le comportement des éléments de la grille est également configurable au cas par cas. L'ordre, le nombre de colonnes ou de lignes que prend un élément est personnalisable. La superposition de cellules est également possible. Que de choix!

Une nouvelle unité: la fraction

Une nouvelle unité est arrivée pour le paramétrage des grilles, il s'agit des fr, qui définissent une fraction de l'espace disponible.

grid-template-columns: repeat(3, 1fr);

Ainsi 1fr 1fr 1fr ou repeat(3, 1fr) permettent d'obtenir une grille de 3 colonnes faisant chacune 1/3 de l'espace disponible restant (après calcul des margins et paddings). Petite astuce démontrée ici.

Les astuces pour expérimenter

Mozilla, via l'outil d'inspection, propose une visualisation de la grille idéale pour comprendre et appréhender les concepts de cette nouvelle spécification. Je ne peux que vous recommander l'édition développeur de Firefox pour vos expérimentations CSS. :)

Grid contre flexbox? Non! Bien au contraire!

Grid et flexbox ne sont pas concurrents mais bien complémentaires. Une nouvelle propriété CSS n'annule pas les précédentes, elle devient complémentaire. C'est simple: utiliser flexbox pour un design sur 1 dimension et Grid pour construire un layout sur 2.

Que faire de tous ces framework de grilles?

CSS Grid rend obsolète les milliers de framework de grilles fluides ou rigides créées pour simplifier le travail de mise en page. À propos de fluidité du design, gardez toujours en tête que c'est une idée qui est dans la nature même du web.

It was as though the web design community were participating in a shared consensual hallucination. Rather than acknowledge the flexible nature of the browser window, they chose to settle on one set width as the ideal …even if that meant changing the ideal every few years. Resilient Web Design by Jeremy Keith

Quelles implications pour l'accessibilité?

With great power comes great responsibility.Voltaire

Si le positionnement Grid permet de modifier la disposition et l'ordre des éléments, il est toujours primordial de garder une hiérarchie cohérente entre le DOM et l'affichage visuel. Pour passer d'un élément à un autre, la touche [tab] se base sur le DOM et non l'ordre dans la grille.

Support des navigateurs actuels et utilisation de @supports()

Safari a été meilleur pour Grid que pour le support de flexbox. Néamoins ça ne fonctionne pas parfaitement partout: l'utilisation de @supports (display: Grid) { ... } garantit que seuls les navigateurs supportant Grid interprétera le code. Plus suprenant, CSS Grid est supporté par les différents moteurs de rendu d'email (Mail.app, mais aussi Outlook Mac.)! Mettons-en dans nos newsletters!

Si le design des newsletters vous intéresse, je vous conseille cette série d'articles sur la refonte de emailWeekly.

Apprendre en s'amusant !

CSS Grid Garden pour Apprendre CSS Grid en plantant des carottes, ça fonctionne bien. Petit jeu créé par Codepip, que vous connaissez peut être déjà avec flexboxfroggy pour apprendre flexbox avec des grenouilles.

Apprendre en utilisant

Évidemment, planter des carottes n'est pas vraiment un problème courant à résoudre en CSS. C'est pourquoi, utiliser CSS Grid dans un vrai projet est encore plus formateur.

Programme hebdomadaire affiché sous forme de grille

Pour le site de la conférence Interaction 18 à Lyon, j'ai utilisé CSS Grid pour afficher le programme hebdomadaire.

Programme hebdomadaire affiché sous forme de grille verticale

Une media query permet de définir une mise en page verticale lorsque la place n'est pas suffisante pour la semaine entière.

Pour aller plus loin