View
1.816
Download
0
Category
Preview:
Citation preview
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…
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 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;}
.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/
Recommended