·1 min de lecture

CSS Grid – une vraie révolution

Auteur(s) de l'article

Marc
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.
Grid CSS - le future. Antistatique Agence de développement web Genève Lausanne

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

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!
<blockquote class="twitter-tweet" data-cards="hidden" data-lang="en"><p lang="en" dir="ltr">You can even use CSS Grid in *emails*! (Fallback to single column.)<a href="https://t.co/KfDYdOCklk">https://t.co/KfDYdOCklk</a> <a href="https://t.co/Z6YHTsOBQK">pic.twitter.com/Z6YHTsOBQK</a></p>&mdash; CSS-Tricks (@Real_CSS_Tricks) <a href="https://twitter.com/Real_CSS_Tricks/status/864519193571602433">May 16, 2017</a></blockquote> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
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.
Pour le site de la conférence Interaction 18 à Lyon, j'ai utilisé CSS Grid pour afficher le programme hebdomadaire.
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

Partager

Mise à jour le: December 11, 2020

Nous serions ravis de discuter avec vous

Nous contacter
Nous contacter

Lausanne

Rue de Genève 90b

+41 21 623 63 03

Newsletter

Formulaire d'inscription à la newsletter

Copyright © 2020 Antistatique

  • Projets
  • Services
  • Agence
  • Équipe
  • Blog
  • Contact

Always keep it simple & sunny!