CSS Grid Layout, le futur de vos mises en page

CSS Grid LayoutLe futur de vos mises en pages !

Mathieu PARISOTDé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…



… 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 !


Chaque ligne est dans un conteneur…


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




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

fr : fraction de l’espace restantmin-content : taille de l'élément le plus petitmax-content : taille de l'élément le plus grandfit-content : équivalent de “auto”

Nouvelles unités (uniquement pour Grid Layout)

Alignements unifiés(version simplifiée…)

justify-xxx : Sens principalalign-xxx : Sens secondaire

justify-xxx : Sens principal Horizontalalign-xxx : Sens secondaire Vertical

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

center : aligne le bloc au milieu de l'axestart : 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;}





Grille virtuelle

La killer feature ?

.block1 { grid-area: bloc1;}




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


.container { display: grid; grid-template-columns: (col) 4.25fr repeat(5, (gutter) 1fr (col)) (gutter); grid-template-rows: repeat(5, 100px);}


(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/

Software

CSS Grid Layout, le futur de vos mises en page