SlideShare une entreprise Scribd logo
1  sur  70
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/

Contenu connexe

Similaire à CSS Grid Layout, le futur de vos mises en page

Création d'une application html5 utilisant canvas, svg et les animations css3
Création d'une application html5 utilisant canvas, svg et les animations css3Création d'une application html5 utilisant canvas, svg et les animations css3
Création d'une application html5 utilisant canvas, svg et les animations css3davrous
 
Préprocesseurs vs CSS natif : Le match !
Préprocesseurs vs CSS natif : Le match !Préprocesseurs vs CSS natif : Le match !
Préprocesseurs vs CSS natif : Le match !Jonathan Levaillant
 
Devoxx France 2013: CSS, more or Less - http://www.devoxx.com/display/FR13/CS...
Devoxx France 2013: CSS, more or Less - http://www.devoxx.com/display/FR13/CS...Devoxx France 2013: CSS, more or Less - http://www.devoxx.com/display/FR13/CS...
Devoxx France 2013: CSS, more or Less - http://www.devoxx.com/display/FR13/CS...VISEO
 
Atelier autour de UWA à ParisWeb 2007
Atelier autour de UWA à ParisWeb 2007Atelier autour de UWA à ParisWeb 2007
Atelier autour de UWA à ParisWeb 2007Netvibes
 
Cassandra techniques de modelisation avancee
Cassandra techniques de modelisation avanceeCassandra techniques de modelisation avancee
Cassandra techniques de modelisation avanceeDuyhai Doan
 
Trois avancées majeures en CSS3 : Media Queries, Grid Layout et Animations
Trois avancées majeures en CSS3 : Media Queries, Grid Layout et AnimationsTrois avancées majeures en CSS3 : Media Queries, Grid Layout et Animations
Trois avancées majeures en CSS3 : Media Queries, Grid Layout et AnimationsMicrosoft
 
Faire le pont entre designers et développeurs au Guardian
Faire le pont entre designers et développeurs au GuardianFaire le pont entre designers et développeurs au Guardian
Faire le pont entre designers et développeurs au GuardianKaelig Deloumeau-Prigent
 
technologie web - part2
technologie web - part2technologie web - part2
technologie web - part2Benoît Simard
 
Intégrateur web aime sass pour ton bien, BLEND Web Mix 2013
Intégrateur web aime sass pour ton bien, BLEND Web Mix 2013Intégrateur web aime sass pour ton bien, BLEND Web Mix 2013
Intégrateur web aime sass pour ton bien, BLEND Web Mix 2013Mehdi Kabab
 
Beautiful CSS : Structurer, documenter, maintenir
Beautiful CSS : Structurer, documenter, maintenirBeautiful CSS : Structurer, documenter, maintenir
Beautiful CSS : Structurer, documenter, maintenirYves Van Goethem
 
Développer pour tous les navigateurs
Développer pour tous les navigateursDévelopper pour tous les navigateurs
Développer pour tous les navigateursMicrosoft
 
Chapitre 2_CSS_complet_Version1.pdf
Chapitre 2_CSS_complet_Version1.pdfChapitre 2_CSS_complet_Version1.pdf
Chapitre 2_CSS_complet_Version1.pdfYassineZARIOUH
 
Chapitre 2_CSS_complet_Version1.pdf
Chapitre 2_CSS_complet_Version1.pdfChapitre 2_CSS_complet_Version1.pdf
Chapitre 2_CSS_complet_Version1.pdfYassineZARIOUH
 
Développement Web - HTML5, CSS3, APIs Web
Développement Web - HTML5, CSS3, APIs WebDéveloppement Web - HTML5, CSS3, APIs Web
Développement Web - HTML5, CSS3, APIs WebYoann Gotthilf
 

Similaire à CSS Grid Layout, le futur de vos mises en page (20)

Création d'une application html5 utilisant canvas, svg et les animations css3
Création d'une application html5 utilisant canvas, svg et les animations css3Création d'une application html5 utilisant canvas, svg et les animations css3
Création d'une application html5 utilisant canvas, svg et les animations css3
 
Préprocesseurs vs CSS natif : Le match !
Préprocesseurs vs CSS natif : Le match !Préprocesseurs vs CSS natif : Le match !
Préprocesseurs vs CSS natif : Le match !
 
1 2-3-grails
1 2-3-grails1 2-3-grails
1 2-3-grails
 
Devoxx France 2013: CSS, more or Less - http://www.devoxx.com/display/FR13/CS...
Devoxx France 2013: CSS, more or Less - http://www.devoxx.com/display/FR13/CS...Devoxx France 2013: CSS, more or Less - http://www.devoxx.com/display/FR13/CS...
Devoxx France 2013: CSS, more or Less - http://www.devoxx.com/display/FR13/CS...
 
Bootstrap 4
Bootstrap 4Bootstrap 4
Bootstrap 4
 
HTML5 & CSS3 : Jeux
HTML5 & CSS3 : Jeux HTML5 & CSS3 : Jeux
HTML5 & CSS3 : Jeux
 
Atelier autour de UWA à ParisWeb 2007
Atelier autour de UWA à ParisWeb 2007Atelier autour de UWA à ParisWeb 2007
Atelier autour de UWA à ParisWeb 2007
 
JQuery
JQueryJQuery
JQuery
 
Cassandra techniques de modelisation avancee
Cassandra techniques de modelisation avanceeCassandra techniques de modelisation avancee
Cassandra techniques de modelisation avancee
 
Trois avancées majeures en CSS3 : Media Queries, Grid Layout et Animations
Trois avancées majeures en CSS3 : Media Queries, Grid Layout et AnimationsTrois avancées majeures en CSS3 : Media Queries, Grid Layout et Animations
Trois avancées majeures en CSS3 : Media Queries, Grid Layout et Animations
 
Faire le pont entre designers et développeurs au Guardian
Faire le pont entre designers et développeurs au GuardianFaire le pont entre designers et développeurs au Guardian
Faire le pont entre designers et développeurs au Guardian
 
technologie web - part2
technologie web - part2technologie web - part2
technologie web - part2
 
Intégrateur web aime sass pour ton bien, BLEND Web Mix 2013
Intégrateur web aime sass pour ton bien, BLEND Web Mix 2013Intégrateur web aime sass pour ton bien, BLEND Web Mix 2013
Intégrateur web aime sass pour ton bien, BLEND Web Mix 2013
 
Beautiful CSS : Structurer, documenter, maintenir
Beautiful CSS : Structurer, documenter, maintenirBeautiful CSS : Structurer, documenter, maintenir
Beautiful CSS : Structurer, documenter, maintenir
 
Découverte HTML5/CSS3
Découverte HTML5/CSS3Découverte HTML5/CSS3
Découverte HTML5/CSS3
 
Développer pour tous les navigateurs
Développer pour tous les navigateursDévelopper pour tous les navigateurs
Développer pour tous les navigateurs
 
Chapitre 2_CSS_complet_Version1.pdf
Chapitre 2_CSS_complet_Version1.pdfChapitre 2_CSS_complet_Version1.pdf
Chapitre 2_CSS_complet_Version1.pdf
 
Chapitre 2_CSS_complet_Version1.pdf
Chapitre 2_CSS_complet_Version1.pdfChapitre 2_CSS_complet_Version1.pdf
Chapitre 2_CSS_complet_Version1.pdf
 
Introduction a jQuery
Introduction a jQueryIntroduction a jQuery
Introduction a jQuery
 
Développement Web - HTML5, CSS3, APIs Web
Développement Web - HTML5, CSS3, APIs WebDéveloppement Web - HTML5, CSS3, APIs Web
Développement Web - HTML5, CSS3, APIs Web
 

CSS Grid Layout, le futur de vos mises en page