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...
<div class="grid">
<div class="row">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<di...
<div class="container">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div...
<div class="container">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div...
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 rowsp...
<div class="row">
<div class="col-3"></div>
<div class="col-3"></div>
<div class="col-3"></div>
<div class="col-3"></div>
...
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 cla...
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 class="row">
<div class="col-3"></div>
<div class="col-3"></div>
<div class="col-3"></div>
<div class="col-3"></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>...
.container {
display: grid;
}
.block1 {
grid-row: 1;
grid-column: 1;
}
.block2 {
grid-row: 1;
grid-column: 2;
}
.block3 {
grid-row: 2;
grid-column: 1;
}...
.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 plu...
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 : Alignem...
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 ...
.block1 {
grid-row: 1;
grid-column: 1;
justify-self: center;
align-self: center;
}
.block2 {
grid-row: 1;
grid-column: 2;
...
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;...
.container {
display: grid;
grid-template-columns: 200px 1fr 50px;
grid-template-rows: 50px 50px;
}
.block4 {
grid-row: 2;...
.container {
display: grid;
grid-template-columns: 200px 1fr 50px;
grid-template-rows: 50px 50px;
}
.block4 {
grid-row: 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 ."
"blo...
Implémentation dans Firefox (et nouvelles syntaxe dans Edge ?)
Sous-grilles imbriquées avec syntaxe simplifiée
Répéter des...
.container {
display: grid;
grid-template-columns: (col) 4.25fr repeat(5, (gutter) 1fr
(col) ) (gutter);
grid-template-row...
.container {
display: grid;
grid-template-columns: (col) 4.25fr repeat(5, (gutter) 1fr
(col) ) (gutter);
grid-template-row...
.container {
display: grid;
grid-template-columns: (col) 4.25fr repeat(5, (gutter) 1fr
(col)) (gutter);
grid-template-rows...
(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
F...
Merci !
@matparisot - http://matparisot.fr
http://matparisot.fr/css-grid-un-controle-total-sur-votre-mise-en-page/
http://...
CSS Grid Layout, le futur de vos mises en page
CSS Grid Layout, le futur de vos mises en page
CSS Grid Layout, le futur de vos mises en page
CSS Grid Layout, le futur de vos mises en page
CSS Grid Layout, le futur de vos mises en page
CSS Grid Layout, le futur de vos mises en page
CSS Grid Layout, le futur de vos mises en page
CSS Grid Layout, le futur de vos mises en page
CSS Grid Layout, le futur de vos mises en page
CSS Grid Layout, le futur de vos mises en page
CSS Grid Layout, le futur de vos mises en page
CSS Grid Layout, le futur de vos mises en page
CSS Grid Layout, le futur de vos mises en page
CSS Grid Layout, le futur de vos mises en page
CSS Grid Layout, le futur de vos mises en page
CSS Grid Layout, le futur de vos mises en page
CSS Grid Layout, le futur de vos mises en page
Prochain SlideShare
Chargement dans…5
×

CSS Grid Layout, le futur de vos mises en page

4 728 vues

Publié le

Faire des mises en pages avancées a toujours été une gageure en CSS. Nous avons utiliser les tableaux, puis des dizaines de div, et tout un tas d'astuces et de bidouilles plus ou moins élégantes. Heureusement les choses changent enfin ! Flexbox est maintenant bien rependue pour agencez nos blocs en ligne ou en colonne, mais il manquait une norme pour réaliser des mises en pages complexes. C'est l'objectif de CSS Grid qui commence à arriver dans nos navigateurs. Découvrons la syntaxe et les possibilités de cette spécification en cours de standardisation au W3C

Publié dans : Logiciels
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
4 728
Sur SlideShare
0
Issues des intégrations
0
Intégrations
2 341
Actions
Partages
0
Téléchargements
27
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

CSS Grid Layout, le futur de vos mises en page

  1. 1. CSS Grid Layout Le futur de vos mises en pages !
  2. 2. Mathieu PARISOT Développeur Web et Java - Formateur http://matparisot.fr @matparisot https://www.google.com/+ParisotMathieu
  3. 3. « Houston, we have a problem… » Tom Hanks Jack Swigert
  4. 4. CSS est arrivé en 1996…
  5. 5. CSS est arrivé en 1996…
  6. 6. CSS est arrivé en 1996… … et on bricole toujours pour faire nos mises pages !
  7. 7. « Portenawak, moi j’y arrive très bien ! » Un développeur anonyme
  8. 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. 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. 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. 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. 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. 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. 14. Et si je veux changer le layout sur mobile ?
  15. 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. 16. FlexBox
  17. 17. Mais ça ne suffit pas !
  18. 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. 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. 20. Peut-on se passer de ces conteneurs ? (Sans Javascript…)
  21. 21. CSS Grid Layout
  22. 22. display: grid;
  23. 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. 24. .container { display: grid; }
  25. 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. 26. .container { display: grid; grid-template-columns: 200px 1fr; grid-template-rows: 200px 200px; }
  27. 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. 28. Alignements unifiés (version simplifiée…)
  29. 29. justify-xxx : Sens principal align-xxx : Sens secondaire
  30. 30. justify-xxx : Sens principal Horizontal align-xxx : Sens secondaire Vertical
  31. 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. 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. 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. 34. grid-column: 2 / span 4; grid-column: span 1 / 2;
  35. 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. 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. 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. 38. Grille virtuelle
  39. 39. La killer feature ?
  40. 40. .block1 { grid-area: bloc1; } .block2 { grid-area: bloc2; } .block3 { grid-area: bloc3; } .block4 { grid-area: bloc4; }
  41. 41. .container { dis play: grid; grid-columns: 200px 1fr 50px; grid-rows: 50px 50px; grid-template-areas: "bloc1 bloc2 ." "bloc3 bloc4 bloc4"; }
  42. 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. 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. 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. 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. 46. (col) 4.25fr repeat(5, (gutter) 1fr (col)) (gutter);
  47. 47. (col) 4.25fr repeat(5, (gutter) 1fr (col)) (gutter);
  48. 48. (col) 4.25fr repeat(5, (gutter) 1fr (col)) (gutter);
  49. 49. (col) 4.25fr repeat(5, (gutter) 1fr (col)) (gutter);
  50. 50. (col) 4.25fr repeat(5, (gutter) 1fr (col)) (gutter);
  51. 51. (col) 4.25fr repeat(5, (gutter) 1fr (col)) (gutter);
  52. 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. 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/

×