This is a draft cheat sheet. It is a work in progress and is not finished yet.
Definir la grid
Display: grid; |
grid sur toute la largeur |
Display: inline-grid |
grid sur une largeur définie |
Définir la taille et le nombre de cases
grid-template-columns: <track-size>; |
grid-template-columns: 40px 50px auto; |
grid-template-columns: <line-name> <track-size>; |
grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px v[end]; |
grid-template-rows: <track-size>; |
grid-template-rows: 25% 100px auto; |
grid-template-rows: <line-name> <track-size>; |
grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line]; |
2 NOMS POUR UNE LIGNE |
grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end]; |
REPEAT |
grid-template-columns: repeat(3, 20px [col-start]); |
grid-template-columns: 20px [col-stat] 20px [col-start] 20px [col-start]; |
sur child element |
grid-column-start: col-start 2; |
Definir les cellules des child elements
|
