CSS Grid – une vraie révolution

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

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.

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.

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é est arrivée pour le paramétrage des grilles, il s'agit des fr, qui définissent une fraction de l'espace disponible.

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.

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 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.

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.

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.

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.

É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.