CSS Grid Layout
Le futur de vos mises en pages !

Mathieu PARISOT
Développeur Web et Java - Formateur
http://matparisot.fr
@matparisot
https://www.google.com/+ParisotMathieu

« Houston,
we have a problem… »
Tom Hanks Jack Swigert

CSS est arrivé en 1996…

CSS est arrivé en 1996…

CSS est arrivé en 1996…
… et on bricole toujours
pour faire nos mises pages !

« Portenawak,
moi j’y arrive très bien ! »
Un développeur anonyme

<table>
<tr>
<td colspan="2"></td>
<td style="width:33%;"></td>
<td style="width:50%;"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>

<div class="grid">
<div class="row">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<div class="row">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
</div>
.table {
display: table;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
}

<div class="container">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<div class="container">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
.cell {
float: left;
}
/* clearfix... */
.container:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}

<div class="container">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<div class="container">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
.cell {
display: inline-block;
}

Qu’est ce qu’il se passe lorsqu’on n’a plus de place ?
Comment je gère les tailles des colonnes ?
Quid du colspan et rowspan ?
Laquelle de ces solutions je prends ?
Quels sont les effets de bords ?
Etc.

<div class="row">
<div class="col-3"></div>
<div class="col-3"></div>
<div class="col-3"></div>
<div class="col-3"></div>
</div>
<div class="row">
<div class="col-6"></div>
<div class="col-3"></div>
<div class="col-3"></div>
</div>
+ de 600 lignes de CSS…

Et si je veux changer le layout sur mobile ?

<div class="row">
<div class="col-xs-6 col-md-4 col-sm-12"></div>
<div class="col-xs-3 col-md-4 col-sm-12"></div>
<div class="col-xs-3 col-md-4 col-sm-12"></div>
</div>

FlexBox

Mais ça ne suffit pas !

<div class="row">
<div class="col-3"></div>
<div class="col-3"></div>
<div class="col-3"></div>
<div class="col-3"></div>
</div>
<div class="row">
<div class="col-6"></div>
<div class="col-3"></div>
<div class="col-3"></div>
</div>
Chaque ligne est
dans un conteneur…

<div class="row">
<div class="col-3"></div>
<div class="col-3"></div>
<div class="col-3"></div>
<div class="col-3"></div>
</div>
<div class="row">
<div class="col-6"></div>
<div class="col-3"></div>
<div class="col-3"></div>
</div>

Peut-on se passer de
ces conteneurs ?
(Sans Javascript…)

CSS Grid Layout

display: grid;

<div class="container">
<div class="block1">Bloc 1</div>
<div class="block2">Bloc 2</div>
<div class="block3">Bloc 3</div>
<div class="block4">Bloc 4</div>
</div>

.container {
display: grid;
}

.block1 {
grid-row: 1;
grid-column: 1;
}
.block2 {
grid-row: 1;
grid-column: 2;
}
.block3 {
grid-row: 2;
grid-column: 1;
}
.block4 {
grid-row: 2;
grid-column: 2;
}

.container {
display: grid;
grid-template-columns: 200px 1fr;
grid-template-rows: 200px 200px;
}

fr : fraction de l’espace restant
min-content : taille de l'élément le plus petit
max-content : taille de l'élément le plus grand
fit-content : équivalent de “auto”
Nouvelles unités
(uniquement pour Grid Layout)

Alignements unifiés
(version simplifiée…)

justify-xxx : Sens principal
align-xxx : Sens secondaire

justify-xxx : Sens principal Horizontal
align-xxx : Sens secondaire Vertical

xxx-self : Aligne un bloc dans son parent
xxx-items : Alignement par défaut des blocs dans la grille
xxx-content : Alignement de la grille dans son parent

center : aligne le bloc au milieu de l'axe
start : aligne le bloc au début de l'axe (gauche ou haut)
end : aligne le bloc à la fin de l'axe (droite ou bas)

.block1 {
grid-row: 1;
grid-column: 1;
justify-self: center;
align-self: center;
}
.block2 {
grid-row: 1;
grid-column: 2;
justify-self: end;
align-self: end;
}

grid-column: 2 / span 4;
grid-column: span 1 / 2;

.container {
display: grid;
grid-template-columns: 200px 1fr 50px;
grid-template-rows: 50px 50px;
}
.block4 {
grid-row: 2;
grid-column: 2 / span 2;
}

.container {
display: grid;
grid-template-columns: 200px 1fr 50px;
grid-template-rows: 50px 50px;
}
.block4 {
grid-row: 2;
grid-column: 2 / span 2;
}

.container {
display: grid;
grid-template-columns: 200px 1fr 50px;
grid-template-rows: 50px 50px;
}
.block4 {
grid-row: 2;
grid-column: 2 / span 2;
}

Grille virtuelle

La killer feature ?

.block1 {
grid-area: bloc1;
}
.block2 {
grid-area: bloc2;
}
.block3 {
grid-area: bloc3;
}
.block4 {
grid-area: bloc4;
}

.container {
dis play: grid;
grid-columns: 200px 1fr 50px;
grid-rows: 50px 50px;
grid-template-areas: "bloc1 bloc2 ."
"bloc3 bloc4 bloc4";
}

Implémentation dans Firefox (et nouvelles syntaxe dans Edge ?)
Sous-grilles imbriquées avec syntaxe simplifiée
Répéter des configuration de Cellules
Cellules nomées

.container {
display: grid;
grid-template-columns: (col) 4.25fr repeat(5, (gutter) 1fr
(col) ) (gutter);
grid-template-rows: repeat(5, 100px);
}
.block {
grid-column: 3;
grid-row: 2 / span 5;
display: grid;
grid: subgrid;
}

.container {
display: grid;
grid-template-columns: (col) 4.25fr repeat(5, (gutter) 1fr
(col) ) (gutter);
grid-template-rows: repeat(5, 100px);
}
.block {
grid-column: 3;
grid-row: 2 / span 5;
display: grid;
grid: subgrid;
}

.container {
display: grid;
grid-template-columns: (col) 4.25fr repeat(5, (gutter) 1fr
(col)) (gutter);
grid-template-rows: repeat(5, 100px);
}
.block {
grid-column: 3;
grid-row: 2 / span 5;
display: grid;
grid: subgrid;
}

(col) 4.25fr repeat(5, (gutter) 1fr (col)) (gutter);

(col) 4.25fr repeat(5, (gutter) 1fr (col)) (gutter);

(col) 4.25fr repeat(5, (gutter) 1fr (col)) (gutter);

(col) 4.25fr repeat(5, (gutter) 1fr (col)) (gutter);

(col) 4.25fr repeat(5, (gutter) 1fr (col)) (gutter);

(col) 4.25fr repeat(5, (gutter) 1fr (col)) (gutter);

Syntaxe de base super simple (une fois les alignements compris…)
Syntaxe avancée très puissante
Un seul conteneur global
Facile de ré-agencer les blocs
Nouvelles unités de tailles super pratiques

Merci !
@matparisot - http://matparisot.fr
http://matparisot.fr/css-grid-un-controle-total-sur-votre-mise-en-page/
http://gridbyexample.com/examples/
http://www.w3.org/TR/css-grid-1/