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.
Moult ressources en ligne existent pour présenter des cas d'usages voire des jeux permettant de mieux appréhender ce modèle de positionnement encore trop obscur.
- GRID: A simple visual cheatsheet for CSS Grid Layout par Malven
- CSS Grid Layout Guide par CSS Tricks
En général ces ressources abordent les notions 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
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 !