Cela ne vous aura sans doute pas échappé : ces derniers temps tout le monde parle de Grid Layout, le récent module de positionnement CSS par grilles, aujourd'hui adopté par la plupart des navigateurs.
Et pour cause, combiné à Flexbox le positionnement Grid Layout nous promet de soigner tous les maux et bidouilles de nos intégrations de pages web.
Cette révolution arrive à un rythme inOui et pour ne pas rater le train en marche (huhu), voici quelques ressources incontournables pour bien comprendre les subtilités de ce nouveau positionnement.
En français
Commençons par quelques liens rédigés dans la langue de Molière, où les ressources sont malheureusement assez rares.
CSS Grid Layout, guide complet
CSS3 Grid Layout
Tutoriels et guides
Cette partie regroupe les articles d'apprentissage généraux, les pense-bête et le site de référence (gridbyexample) qui propose tutoriels, vidéos et démos.
Learn CSS Grid
CSS Reference (cheat sheet)
Grid By Example
Articles divers
Quelques articles transversaux concernant Grid Layout dans son rapport avec Flexbox ou Bootstrap, ainsi que des cas d'étude concrets.
CSS Grid: One Layout, Multiple Ways
Does CSS Grid Replace Flexbox?
Replace Bootstrap Layouts with CSS Grid
Case Study: My First Practical CSS Grid Layout
Jeux et démos
Ici c'est la partie ludique où l'on trouve les très nombreux exemples de Codepen ainsi que le jeu CSS Grid Garden (du même auteur que le célèbre Flexbox Froggy).
Démos Grid Layout sur CodePen
CSS Grid Garden
Dans la vraie vie
Sachez qu'il existe une page web qui recense les (quelques) sites web réalisés avec Grid Layout.
CSS Grid in production
Polyfill
Pour finir, voici le lien vers le (seul ?) polyfill permettant d'émuler Grid Layout sur les navigateurs anciens tels que IE9.