grid-template-columns
: la largeur des différentes colonnes. Peuvent être desgrid-template-column: 20% 40% 40%
grid-template-column: 1fr 2fr 2fr
repeat
pour répéter la même chose : grid-template-column: repeat(5, 1fr)
donne 5 colonnes de même taillegrid-template-rows
: idem pour les lignesgrid-template: <lignes> / <colonnes>
grid-template-areas
: permet de créer des zones qui seront occupées par des éléments enfants en leur donnant des noms. Par exemple un layout classique serait :grid-column-gap
: espacement entre les colonnes (marche avec toutes les unités grid-row-gap
: espacement entres les lignesgrid-gap
: les deux d'un coupgrid-column-start
: première colonne occupée par l'élément (la première colonnegrid-column-end
: colonne où s'arrête l'élément. Deux possibilités :grid-column-end: 3
: l'élément occupe les colonnes 1 et 2 (1 inclus àgrid-column-end: span 2
: l'élément occupe les colonnes 1 et 2. (deuxgrid-column: <start> / <end>
:grid-column: 1 / 3
et grid-column: 1 / span 2
sont les équivalents des exemplesgrid-row-start
: idem que pour les colonnes mais pour les lignesgrid-row-end
: idemgrid-row
: idemgrid-area
: place l'élément dans la zone indiquée dans la propriété du grid containergrid-template-areas
.align-self: start | end | center | stretch;
: aligne verticalement l'élément aujustify-self: start | end | center | stretch;
aligne horizontalement l'élémentplace-self: <align-self> / <justify-self>
.