Show Menu
Cheatography

CSS grid Cheat Sheet (DRAFT) by

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-t­emp­lat­e-c­olumns: <tr­ack­-si­ze>;
grid-t­emp­lat­e-c­olumns: 40px 50px auto;
grid-t­emp­lat­e-c­olumns: <li­ne-­nam­e> <tr­ack­-si­ze>;
grid-t­emp­lat­e-c­olumns: [first] 40px [line2] 50px [line3] auto [col4-­start] 50px v[end];
grid-t­emp­lat­e-rows: <tr­ack­-si­ze>;
grid-t­emp­lat­e-rows: 25% 100px auto;
grid-t­emp­lat­e-rows: <li­ne-­nam­e> <tr­ack­-si­ze>;
grid-t­emp­lat­e-rows: [row1-­start] 25% [row1-end] 100px [third­-line] auto [last-­line];
2 NOMS POUR UNE LIGNE
grid-t­emp­lat­e-rows: [row1-­start] 25% [row1-end row2-s­tart] 25% [row2-­end];
REPEAT
grid-t­emp­lat­e-c­olumns: repeat(3, 20px [col-s­tart]);
grid-t­emp­lat­e-c­olumns: 20px [col-stat] 20px [col-s­tart] 20px [col-s­tart];
sur child element
grid-c­olu­mn-­start: col-start 2;

Definir les cellules des child elements

 

Définir la grid area