Toutes les propriétés grid courantes, regroupées selon leur portée : le conteneur, l'élément et les unités de dimensionnement. Chaque ligne associe la propriété à ses valeurs courantes.
Grid dispose les éléments en deux dimensions : des lignes et des colonnes à la fois. Définissez display: grid sur le parent, définissez les pistes avec grid-template-columns et grid-template-rows, puis placez les enfants dans les cellules. Utilisez grid pour les mises en page et les cartes ; utilisez flexbox pour les barres unidimensionnelles. Les deux se combinent librement.
Tableau de référence · 33 entrées
CSS GridExplained
33 of 33 rows
Conteneur
grid | inline-grid
Transforme l'élément en conteneur grid.
1fr 1fr | repeat(3, 1fr) | 200px 1fr
Définit les colonnes et leurs largeurs.
auto 1fr auto
Définit les lignes et leurs hauteurs.
[main-start] 1fr [main-end]
Nomme les lignes de la grille dans un template et place les éléments d'après ces noms.
1rem | 8px 16px
Espace entre les lignes et les colonnes.
"header header" "nav main"
Nomme les cellules pour un placement lisible.
"head head" 64px "nav main" 1fr / 200px 1fr
Définit lignes, colonnes et zones en une seule écriture raccourcie.
repeat(2, 1fr) / auto-flow 80px
Définit toutes les propriétés de pistes et grid-auto-flow en une seule déclaration.
minmax(80px, auto)
Définit la hauteur des lignes que le template ne définit pas.
120px | minmax(0, 1fr)
Définit la largeur des colonnes que le template ne définit pas.
row | column | row dense
Choisit l'axe des éléments non placés ; dense remplit les trous laissés plus tôt.
start | center | end | stretch
Aligne chaque élément dans sa cellule le long de l'axe des lignes.
start | center | end | stretch
Aligne chaque élément dans sa cellule le long de l'axe des colonnes.
center | start end
Définit align-items et justify-items en une seule déclaration.
start | center | space-between
Aligne la grille des pistes dans le conteneur le long de l'axe des lignes.
start | center | space-between
Aligne la grille des pistes dans le conteneur le long de l'axe des colonnes.
center | end start
Définit align-content et justify-content en une seule déclaration.
Élément
1 / 3 | span 2
Place un élément sur des colonnes ou l'étend sur plusieurs.
1 / 2 | span 3
Place un élément sur des lignes ou l'étend sur plusieurs.
grid-column: 2 / -1
Compte les lignes depuis la fin de la grille ; -1 est la dernière ligne.
header | 1 / 1 / 2 / 3
Nomme un élément ou le place entièrement en une seule écriture raccourcie.
start | center | end | stretch
Aligne ce seul élément dans sa cellule le long de l'axe des lignes.
start | center | end | stretch
Aligne ce seul élément dans sa cellule le long de l'axe des colonnes.
center | start end
Définit align-self et justify-self en une seule déclaration.
Unités de dimensionnement
1fr | 2fr
Une fraction de l'espace libre dans la piste.
auto | 1fr auto
Dimensionne une piste d'après son contenu ; l'alignement peut l'étirer.
min-content | max-content
Dimensionne une piste à son contenu le plus petit ou le plus grand.
fit-content(180px)
Dimensionne une piste d'après son contenu, sans jamais dépasser le plafond indiqué.
minmax(200px, 1fr)
Borne une piste entre un minimum et un maximum.
repeat(4, 1fr)
Répète un motif de pistes sans taper chacune d'elles.
repeat(auto-fit, minmax(120px, 1fr))
Ajoute autant de pistes que possible ; auto-fit réduit à zéro les pistes vides.
grid-template-columns: subgrid
Fait partager à une grille imbriquée les pistes et les noms de lignes du parent.
grid-template-rows: masonry
Expérimental : empile les éléments dans des colonnes par hauteur au lieu de lignes fixes.