CSS GRID
Grid Container
• L'élément sur lequel display: grid est appliqué.
C'est le parent direct de tous les éléments de
la grille. Dans cet exemple, le conteneur est le
grid container.
Grid Item
• Les enfants (c'est-à-dire les descendants
directs) du grid container. Ici, les éléments
item sont des ‘grid item’, mais le sous-élément
ne l'est pas.
Grid Line
• Les lignes qui composent la structure de la grille. Ils peuvent
être verticaux («column grid lines») ou horizontales («row grid
lines») et se trouver de chaque côté d'une ligne ou d'une
colonne. Ici, la ligne jaune est un exemple de ligne de grille de
colonne.
Grid Cell
• L'espace entre deux lignes adjacentes et deux lignes de
colonnes adjacentes. Il s’agit d’une seule «unité» de la grille.
Voici la cellule de grille entre les lignes de grille de ligne 1 et 2
et les lignes de grille de colonne 2 et 3
Grid Track
• L'espace entre deux lignes adjacentes de la
grille. Vous pouvez les considérer comme les
colonnes ou les lignes de la grille.
Grid Area
• L'espace total entouré par quatre lignes. Une
‘grid area’ peut être composée de n'importe
quel nombre de ‘grid cell
Propiétés Grid Container
• display • align-items
• grid-template- • place-items
columns • justify-content
• grid-template-rows • align-content
• grid-template-areas • place-content
• grid-template • grid-auto-columns
• grid-column-gap • grid-auto-rows
• grid-row-gap • grid-auto-flow
• grid-gap • grid
• justify-items
Propiétés Grid Item
• grid-column-start
• grid-column-end
• grid-row-start
• grid-row-end
• grid-column
• grid-row
• grid-area
• justify-self
• align-self
• place-self
Propriété (display)
• Définit l'élément en tant que ‘grid container’
et établit un nouveau contexte de formatage
de grille pour son contenu.
• Valeurs: grid | inline-grid
• CSS
.container { display: grid | inline-grid; }
Propriété (grid-template-columns,
grid-template-rows )
• Définit la taille des colonnes et des lignes de la
grille.
• Valeurs: px | % | fr |….
• CSS
.container { grid-template-columns: ... | ...; grid-
template-rows: ... | ...; }
Propriété (grid-template-columns,
grid-template-rows )
• Définit la taille des colonnes et des lignes de la
grille.
• Valeurs: px | % | fr |….
• CSS
.container { grid-template-columns: ... | ...; grid-
template-rows: ... | ...; }
Propriété (grid-template-columns,
grid-template-rows )
• Définit la taille des colonnes et des lignes de la grille.
• Valeurs: px | % | fr |….
• CSS
.container { grid-template-columns: 40px 50px auto 50px 40px;
grid-template-rows: 25% 100px auto; }
Propriété (grid-template-columns,
grid-template-rows )
• Définit la taille des colonnes et des lignes de la grille.
• Valeurs: px | % | fr |….
• CSS
.container { grid-template-columns: [first] 40px [line2] 50px [line3] auto
[col4-start] 50px [five] 40px [end];
grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto
[last-line]; }
Propriété (grid-column-start,
)
grid-column-end, grid-row-start, grid-row-end
• Valeurs: <line> | span <number>|span <name>
• CSS
.item { grid-column-start: <number> | <name> | span
<number> | span <name> | auto;
grid-column-end: <number> | <name> | span
<number> | span <name> | auto;
grid-row-start: <number> | <name> | span <number>
| span <name> | auto;
grid-row-end: <number> | <name> | span <number> |
span <name> | auto; }
Propriété (grid-column-start,
)
grid-column-end, grid-row-start, grid-row-end
• Valeurs: <line> | span <number>|span <name>
• CSS
.item-a { grid-column-start: 2;
grid-column-end: five;
grid-row-start: row1-start;
grid-row-end: 3; }
Propriété (grid-column-start,
)
grid-column-end, grid-row-start, grid-row-end
• Valeurs: <line> | span <number>|span <name>
• CSS
.item-b { grid-column-start: 1;
grid-column-end: span col4-start;
grid-row-start: 2;
grid-row-end: span 2; }
Propriété shorthand(grid-column
grid-row)
• grid-column= grid-column-start + grid-column-end
• grid-row= grid-row-start + grid-row-end
• CSS
.item { grid-column: <start-line> / <end-line> | <start-line> /
span <value>;
grid-row: <start-line> / <end-line> | <start-line> / span <value>; }
Propriété shorthand(grid-column
grid-row)
• grid-column= grid-column-start + grid-column-end
• grid-row= grid-row-start + grid-row-end
• CSS
.item-c { grid-column: 3 / span 2;
grid-row: third-line / 4; }
Propriété (grid-template-areas)
• Valeurs:
• <grid-area-name> – nom de la ‘grid area’ specifié au niveau
de l’item avec ‘grid area’
• . – un point signifie une cellule de grille vide
• none – aucune ‘grid area’ n'est définie
• CSS
.container {
grid-template-areas: " | . | none | ...“
". . ."; }
Propriété (grid-template-areas)
.item-a { grid-area: header; } .item-b { grid-area: main; }
.item-c { grid-area: sidebar;} .item-d { grid-area: footer; }
.container { display: grid;
grid-template-columns: 50px 50px 50px 50px;
grid-template-rows: auto;
grid-template-areas: "header header header header"
"main main . sidebar“
"footer footer footer footer"; }
Propriété (grid-area)
• Valeurs: <name>| <row-start> / <column-
start> / <row-end> / <column-end>.
• CSS
.item { grid-area: <name> }
.item {grid-area: <row-start> / <column-start> /
<row-end> / <column-end>; }
Propriété (grid-area)
• Valeurs: <name>| <row-start> / <column-
start> / <row-end> / <column-end>.
• CSS
.item-d { grid-area: header; }
Propriété (grid-area)
• Valeurs: <name>| <row-start> / <column-start> / <row-end>
/ <column-end>.
• CSS
.item-d { grid-area: 1 / col4-start / last-line / 6;}
Propriété (column-gap
row-gap)
• Valeurs: <line-size>
• CSS
.container {column-gap: <line-size>;
row-gap: <line-size>;}
Propriété (column-gap
row-gap)
• Valeurs: <line-size>
• CSS
.container { grid-template-columns: 100px 50px 100px;
grid-template-rows: 80px auto 80px;
column-gap: 10px;
row-gap: 15px; }
Propriété (justify-items)
• Valeurs: start | end | center | stretch
• CSS
.container { justify-items: start; }
Propriété (justify-items)
• Valeurs: start | end | center | stretch
• CSS
.container { justify-items: end; }
Propriété (justify-items)
• Valeurs: start | end | center | stretch
• CSS
.container { justify-items: center; }
Propriété (justify-items)
• Valeurs: start | end | center | stretch
• CSS
.container { justify-items: stertch; }
Propriété (align-items)
• Valeurs: start | end | center | stretch
• CSS
.container { align-items: start; }
Propriété (align-items)
• Valeurs: start | end | center | stretch
• CSS
.container { align-items: end; }
Propriété (align-items)
• Valeurs: start | end | center | stretch
• CSS
.container { align-items: center; }
Propriété (align-items)
• Valeurs: start | end | center | stretch
• CSS
.container { align-items: stretch; }
Propriété shorthand (place-items)
• Valeurs: <align-items> / <justify-items>
• CSS
.container { place-items: stretch / center; }
Propriété (justify-self)
• Valeurs: start | end | center | stretch
• CSS
.item-a { justify-self: start; }
Propriété (justify-self)
• Valeurs: start | end | center | stretch
• CSS
.item-a { justify-self: end; }
Propriété (justify-self)
• Valeurs: start | end | center | stretch
• CSS
.item-a { justify-self: center; }
Propriété (justify-self)
• Valeurs: start | end | center | stretch
• CSS
.item-a { justify-self: stretch; }
Propriété (align-self)
• Valeurs: start | end | center | stretch
• CSS
.item-a { align-self: start; }
Propriété (align-self)
• Valeurs: start | end | center | stretch
• CSS
.item-a { align-self: end; }
Propriété (align-self)
• Valeurs: start | end | center | stretch
• CSS
.item-a { align-self: center; }
Propriété (align-self)
• Valeurs: start | end | center | stretch
• CSS
.item-a { align-self: stretch; }
Propriété (place-self)
• Valeurs: <align-self> / <justify-self>
• CSS
.item-a { place-self: center stretch; }
Propriété (justify-contents)
• Valeurs: start | end | center |space-between|
space-around| space-evenly | stretch
• CSS
.container { justify-contents: space-around; }
Propriété (align-contents)
• Valeurs: start | end | center |space-between|
space-around| space-evenly | stretch
• CSS
.container { align-contents: space-around; }