1.
CSS Grid Layout
Le futur de vos mises en pages !

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

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

4.
CSS est arrivé en 1996…

5.
CSS est arrivé en 1996…

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

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

8.
<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>

9.
<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;
}

10.
<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;
}

11.
<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;
}

12.
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.

13.
<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…

14.
Et si je veux changer le layout sur mobile ?

15.
<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>

16.
FlexBox

17.
Mais ça ne suffit pas !

18.
<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…

19.
<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>

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

21.
CSS Grid Layout

22.
display: grid;

23.
<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>

24.
.container {
display: grid;
}

25.
.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;
}

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

27.
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)

28.
Alignements unifiés
(version simplifiée…)

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

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

31.
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

32.
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)

33.
.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;
}

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

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

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

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

38.
Grille virtuelle

39.
La killer feature ?

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

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

42.
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

43.
.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;
}

44.
.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;
}

45.
.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;
}

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

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

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

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

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

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

52.
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

53.
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/