Publicité
Publicité

Contenu connexe

Publicité

CSS Grid Layout, le futur de vos mises en page

  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/
Publicité