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.
Commentaires
Merci :-) (Imprimé et collé au mur :-)
PS. J'aimerais bien acheter une barre vitaminée sauce kiwi... mais je n'ai plus le lien ... :-) :-) :-)
Merci beaucoup :)
Merci ; toujours heureux d'apprendre ce qui se fait de mieux !
Super pratique toujours à portée de main!
Merci!
Salut
Concernant "Grid Layout cheatsheet", sujet "grid concepts and example" :
.three {
grid-row: 2/4;
grid-column: 2
}
Il me semble que la section .three est dans la colonne 1, donc :
.three {
grid-row: 2/4;
grid-column: 1
}
@danielhagnoul : Tu as tout à fait raison, on va changer ça rapidement. Merci !
Merci pour ce document !
Petite erreur je pense, row-gap et column-gap devraient être grid-row-gap et grid-column-gap.
@Nilav_ : en fait, la spécification Grid évolue sur ce point et les nouvelles propriétés sont/seront officiellement row-gap et column-gap (pour pouvoir être utilisées dans d'autres modèles comme Flexbox par exemple).
@Raphael : Toujours est-il que row-gap et column-gap ne marche ni sur Firefox, ni sur Chrome chez moi. Je n'ai pas essayé en préfixant mais l'intérêt est nul, autant utiliser grid-
Cela dit, c'est cool que cela soit harmonisé avec Flexbox en sachant que c'est déjà ce qui est utilisé aussi pour un column-count (dans le cas de column-gap)
C'est du fort beau boulot !