De plus en plus incontournable, la spécification CSS Grid Layout ouvre de très larges possibilités pour nos intégrations de pages web, en complément à ce qu'offre déjà le très intéressant Flexbox.
De plus en plus de ressources proposent des tutoriels, des cas d'usages voire des jeux permettant de mieux appréhender ce modèle de positionnement encore trop obscur.
Pour vous dépanner au quotidien, Alsacréations vous propose sa Grid Cheatsheet au format PDF, que vous pouvez télécharger à l'adresse kiwi.gg/gridcheat (75 Ko).
Ce memento est composé des sections suivantes :
- les concepts principaux de Grid Layout (lignes, rangées, cellules, zones)
- propriétés applicables sur le parent (avec les valeurs par défaut)
- les propriétés de placement d'éléments (avec les valeurs par défaut)
- les propriétés de placement automatique et de gouttières
- les propriétés d'alignements applicables sur le parent et les enfants
- quelques modèles classiques : centrage, pied de page en bas, répétitions, grille simple
- liens vers des ressources incontournables
N'hésitez pas à le télécharger, il est en usage libre (mentions d'Alsacréations recommandée) et à nous faire toute critique ou suggestion à propos de ce document.