50 nuances de grilles

"CSS c'est de la merde" - Tout le monde, avant.

L'évolution de CSS et des navigateurs web est telle que les bidouilles à base de float, clearfix, frameworks et autres marges négatives ne seront bientôt qu'un mauvais souvenir à raconter à tes petits enfants, une larme à l'oeil. Grâce à Flexbox et Grid Layout, CSS nous propose de formidables outils pour nos designs web actuels et à venir. Penchons nous sur le petit dernier, Grid Layout, qui est désormais supporté par tous les navigateurs.

Transcript

1. 50 nuances de grilles vue de ma chambre de l’Hôtel Bonaventure, Montréal
2. Raphaël Goetter
3. AND THE WINNER IS…
5. TL;DR allège énormément le code HTML plus simple que float, inline-block, … responsive intégré aligne facilement dans tous les sens toutes les mises en page sont possibles supporté par tous les navigateurs GRID LAYOUT EST UN FRAMEWORK À LUI TOUT SEUL
6. échauffement rapide mise en bouche
7. <div> 1/3 <div> 2/3 TODO! <div>div</div> <div>div</div>
8. l’une de ces deux méthodes utilise Bootstrap sauras-tu la retrouver ?
9. <div class="container"> <div class="row no-gutters"> <div class="col-4">div</div> <div class="col-8">div</div> </div> </div> .row { display: flex; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; } .col-4 { flex: 0 0 33.333333%; max-width: 33.333333%; } .col-8 { flex: 0 0 66.666667%; max-width: 66.666667%; } .no-gutters { margin-right: 0; margin-left: 0; > .col, > [class*="col-"] { padding-right: 0; padding-left: 0; } } 1
10. <div class="container"> <div>div</div> <div>div</div> </div> .container { display: grid; grid-template-columns: 1fr 2fr; } 2
11. bootstrap 4 grid layout <div class="container"> <div class="row no-gutters"> <div class="col-4">div</div> <div class="col-8">div</div> </div> </div> .row { display: flex; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; } .col-4 { flex: 0 0 33.333333%; max-width: 33.333333%; } .col-8 { flex: 0 0 66.666667%; max-width: 66.666667%; } .no-gutters { margin-right: 0; margin-left: 0; > .col, > [class*="col-"] { padding-right: 0; padding-left: 0; } } <div class="container"> <div>div</div> <div>div</div> </div> .container { display: grid; grid-template-columns: 1fr 2fr; }
12. <div> <div> <div> <div> TODO!
13. <div class="container"> <div class="row no-gutters"> <div class="col-4">div</div> <div class="col-8">div</div> </div> <div class="row no-gutters"> <div class="col-4">div</div> <div class="col-8">div</div> </div> </div> .row { display: flex; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; } .col-4 { flex: 0 0 33.333333%; max-width: 33.333333%; } .col-8 { flex: 0 0 66.666667%; max-width: 66.666667%; } .no-gutters { margin-right: 0; margin-left: 0; > .col, > [class*="col-"] { padding-right: 0; padding-left: 0; } } 1
14. <div class="container"> <div>div</div> <div>div</div> <div>div</div> <div>div</div> </div> .container { display: grid; grid-template-columns: 1fr 2fr; } 2
15. <div> <div> <div> TODO!
17. <div class="container"> <div>div</div> <div>div</div> <div>div</div> </div> .container { display: grid; grid-template-columns: 1fr 2fr; } div:first-child { grid-row: span 2; } 2
18. bootstrap grid layout
19. TU ME MONTRES ? bon c’est pas tout ça, mais…
20. hein marty ? Mais on faisait Ca en 1996 avec <table> !
21. Grid layout est virtuel Positionnements intuitifs Alignements variés Réordonnement facile Chevauchements possibles Responsive simplissime NOPE
22. <table> layout grid layout
23. achetez le livre de Raphael oui Mais on faisait Ca en 2014 avec flexbox !
25. grid layout flexbox
26. ou KNACSS euh Mais on fait Ca aujourd'hui avec bootstrap !
28. bootstrap.min.css (juste la grille)
29. .container { display: grid; grid-template-columns: repeat(12, 1fr); gap: 15px; } <aside> <main> aside { grid-column: span 3; } main { grid-column: span 9; } grid layout (5 lignes)
30. T’AS DES EXEMPLES ? super tout ça, mais… https://slate.com/
31. https://www.lemonde.fr/
32. https://codepen.io/andybarefoot/pen/wrXvLj
33. https://codepen.io/julesforrest/full/QaBvPe
34. https://codepen.io/raphaelgoetter/pen/aqzOxg
35. http://codepen.io/raphaelgoetter/pen/xwaoOP?editors=1100
36. https://codepen.io/raphaelgoetter/pen/QgQJBj?editors=1100
37. http://codepen.io/raphaelgoetter/pen/pgRQwv
38. https://codepen.io/knyttneve/pen/QVqyNg
39. https://codepen.io/victorjanin/pen/oGYvjK
40. SUPPORT DE GRID LAYOUT
41. https://caniuse.com/css-grid
42. glossaire pour bien comprendre des trucs ensuite
43. grid container élément parent conteneur de la grille <section class="grid-container"> <div>Salade</div> <div>Tomate</div> <div>Oignon</div> <div>Picon bière</div> </section>
44. grid item enfant direct d’un grid container <section class="grid-container"> <div>Salade</div> <div>Tomate</div> <div>Oignon</div> <div>Picon bière</div> </section>
45. grid line ligne divisant la grille
46. grid track une colonne ou une rangée
 (espace entre deux grid lines)
47. grid cell intersection entre deux grid tracks
 (unité de positionnement dans la grille)
48. grid area zone d’une ou plusieurs cellules
 (une ou plusieurs grid cells)
49. unités et valeurs Photo credit: pasa47 via Visualhunt / CC BY
50. unité « fr » .grid-container { display: grid; grid-template-columns: 100px 100px 1fr; } fraction de l’espace disponible
51. unité « fr » .grid-container { display: grid; grid-template-columns: 100px 1fr 1fr; } fraction de l’espace disponible
52. unité « fr » .grid-container { display: grid; grid-template-columns: 100px 2fr 1fr; } fraction de l’espace disponible
53. minmax() .grid-container { display: grid; grid-template-columns: minmax(100px, 20%) 1fr 1fr; }
54. construction de grilles
55. initialisation .ingrid { display: grid; }
56. colonnes .ingrid { display: grid; grid-template-columns: 100px 1fr; }
57. lignes .ingrid { display: grid; grid-template-columns: 100px 1fr; grid-template-rows: 50px 1fr; }
58. positionnement
59. positionnement explicite on place avec grid-column et grid-row positionnement par « area » on place avec grid-area positionnement « auto » bah ça marche tout seul, gars
60. positionnement « auto » .hagrid { display: grid; grid-template-columns: 100px 1fr; } <nav>nav</nav> <header>header</header> <aside>aside</aside> <main>main</main> nav header aside main
61. positionnement explicite .hagrid { display: grid; grid-template-columns: 100px 1fr; } nav header aside main <nav>nav</nav> <header>header</header> <aside>aside</aside> <main>main</main> nav { grid-column: 1; grid-row: 1; } main { grid-column: 2; grid-row: 2; } raccourci de : grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 2;
62. positionnement explicite .hagrid { display: grid; grid-template-columns: 100px 1fr; } header aside main <header>header</header> <aside>aside</aside> <main>main</main> header { grid-column: 1 / 3; } raccourci de : grid-column-start: 1; grid-column-end: 3;
63. positionnement par « area » .hagrid { display: grid; grid-template-columns: 100px 1fr; grid-template-areas: "a b" "c d"; } <nav>nav</nav> <header>header</header> <aside>aside</aside> <main>main</main> nav { grid-area: a; } header { grid-area: b; } aside { grid-area: c; } main { grid-area: d; } nav header aside main
64. positionnement par « area » .hagrid { display: grid; grid-template-columns: 100px 1fr; grid-template-areas: "a b" "a c"; } <nav>nav</nav> <header>header</header> <main>main</main> nav { grid-area: a; } header { grid-area: b; } main { grid-area: c; } nav header main
65. QUIZ !
66. CAS 1 nav .ingrid { display: grid; grid-template-columns: 100px 300px; } nav { grid-column: 2 / 3; }
67. CAS 1 nav .ingrid { display: grid; grid-template-columns: 100px 300px; } nav { grid-column: 2 / 3; } raccourci de : grid-column-start: 2; grid-column-end: 3;
68. CAS 2 nav .ingrid { display: grid; grid-template-columns: 100px 300px; } nav { grid-column: 2; }
69. CAS 2 nav .ingrid { display: grid; grid-template-columns: 100px 300px; } nav { grid-column: 2; } raccourci de : grid-column-start: 2; grid-column-end: 3;
70. CAS 3 nav .ingrid { display: grid; grid-template-columns: 100px 300px; } nav { grid-column: 3; }
71. CAS 3 .ingrid { display: grid; grid-template-columns: 100px 300px; } nav { grid-column: 3; } raccourci de : grid-column-start: 3; grid-column-end: 4; nav
72. CAS 4 nav .ingrid { display: grid; grid-template-columns: 100px 300px; } nav { grid-column-end: 1; }
73. CAS 4 .ingrid { display: grid; grid-template-columns: 100px 300px; } nav { grid-column-end: 1; } raccourci de : grid-column-start: ???; grid-column-end: 1; nav
74. CAS 5 nav .ingrid { display: grid; grid-template-columns: 100px 300px; } nav { grid-column: 3 / 2; }
75. CAS 5 nav .ingrid { display: grid; grid-template-columns: 100px 300px; } nav { grid-column: 3 / 2; } raccourci de : grid-column-start: 2; grid-column-end: 3;
76. CAS 6 nav .ingrid { display: grid; grid-template-columns: 100px 300px; } nav { grid-area: 2 / 1 / 4 / 2; }
77. CAS 6 .ingrid { display: grid; grid-template-columns: 100px 300px; } nav { grid-area: 2 / 1 / 4 / 2; } raccourci de : grid-row-start: 2; grid-row-end: 4; grid-column-start: 1; grid-column-end: 2; nav
78. alignements
79. alignement horizontal justify-content alignement horizontal de la grille justify-items alignement horizontal des grid-items justify-self alignement individuel d’un grid-item alignement vertical align-content alignement vertical de la grille align-items alignement vertical des grid-items align-self alignement individuel d’un grid-item
80. aligner la grille .grid-container { display: grid; } <div class=“grid-container”> </div>
81. aligner la grille .grid-container { display: grid; grid-template-columns: 15% 15% 15%; } <div class=“grid-container”> </div>
82. aligner la grille .grid-container { display: grid; grid-template-columns: 15% 15% 15%; justify-content: normal; } <div class=“grid-container”> </div> (=start)
83. aligner la grille .grid-container { display: grid; grid-template-columns: 15% 15% 15%; justify-content: end; } <div class=“grid-container”> </div>
84. aligner la grille .grid-container { display: grid; grid-template-columns: 15% 15% 15%; justify-content: center; } <div class=“grid-container”> </div>
85. aligner la grille .grid-container { display: grid; grid-template-columns: 15% 15% 15%; justify-content: space-between; } <div class=“grid-container”> </div>
86. aligner la grille .grid-container { display: grid; grid-template-columns: 15% 15% 15%; justify-content: space-around; } <div class=“grid-container”> </div>
87. aligner la grille .grid-container { display: grid; grid-template-columns: 15% 15% 15%; justify-content: space-evenly; } <div class=“grid-container”> </div>
88. aligner les items .grid-container { display: grid; grid-template-columns: 1fr 1fr 1fr; } <div class=“grid-container”> </div>
89. aligner les items .grid-container { display: grid; grid-template-columns: 1fr 1fr 1fr; } <div class=“grid-container”> <div class=“salade”> <div class=“tomate”> <div class=“oignon”> </div> Salade Tomate Oignon
90. aligner les items .grid-container { display: grid; grid-template-columns: 1fr 1fr 1fr; justify-items: normal; } <div class=“grid-container”> <div class=“salade”> <div class=“tomate”> <div class=“oignon”> </div> Salade Tomate Oignon (=stretch)
91. aligner les items .grid-container { display: grid; grid-template-columns: 1fr 1fr 1fr; justify-items: start; } <div class=“grid-container”> <div class=“salade”> <div class=“tomate”> <div class=“oignon”> </div> Salade Tomate Oignon
92. aligner les items .grid-container { display: grid; grid-template-columns: 1fr 1fr 1fr; justify-items: end; } <div class=“grid-container”> <div class=“salade”> <div class=“tomate”> <div class=“oignon”> </div> Salade Tomate Oignon
93. aligner les items .grid-container { display: grid; grid-template-columns: 1fr 1fr 1fr; justify-items: center; } <div class=“grid-container”> <div class=“salade”> <div class=“tomate”> <div class=“oignon”> </div> Salade Tomate Oignon
94. aligner un item .grid-container { display: grid; grid-template-columns: 1fr 1fr 1fr; justify-items: center; } <div class=“grid-container”> <div class=“salade”> <div class=“tomate”> <div class=“oignon”> </div> Salade Tomate Oignon .tomate { justify-self: end; }
95. aligner un item .grid-container { display: grid; grid-template-columns: 1fr 1fr 1fr; justify-items: center; } <div class=“grid-container”> <div class=“salade”> <div class=“tomate”> <div class=“oignon”> </div> Salade Tomate Oignon .tomate { justify-self: end; align-self: end; }
96. .grid-container { display: grid; justify-content: center; align-content: center; } salade tomate oignon picon bière en plein dans le mille !
97. un template responsive ? photo CC Loic Djim https://unsplash.com/@loic
98. chiche !
102. ET C’EST PAS FINI !
103. 1 2 3 grid-auto-flow: dense 4 5 grid-auto-flow: row dense; 1 2 3 4 5 https://codepen.io/raphaelgoetter/pen/MpJMBo?editors=1100 grid-auto-flow: row;
104. Salade Tomate Oignon .grid-container { display: grid; grid-template-columns: repeat(4, 1fr); } repeat() Picon bière
105. 1 2 3 .grid-container { display: grid; grid-template-columns: repeat(3, 50px 100px); } repeat() 4 5 6
106. Salade Tomate Oignon .grid-container { display: grid; grid-template-columns: repeat(auto-fit, 100px); } auto-fit Picon bière
107. .grid-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); } maxi combo ! http://codepen.io/raphaelgoetter/pen/pgRQwv
108. .grid { display: grid; } automatisation base :
109. .grid { display: grid; --grid-number: 1; --grid-gutter: 0; } automatisation base : http://caniuse.com/#feat=css-variables «variables CSS ❤
110. .grid { display: grid; --grid-number: 1; --grid-gutter: 0; grid-gap: var(--grid-gutter); } automatisation base :
111. .grid { display: grid; --grid-number: 1; --grid-gutter: 0; grid-gap: var(--grid-gutter); grid-template-columns: repeat(var(--grid-number), 1fr); } automatisation base :
112. .grid { display: grid; --grid-number: 1; --grid-gutter: 0; grid-gap: var(--grid-gutter); grid-template-columns: repeat(var(--grid-number), 1fr); } automatisation base : .grid-6 { --grid-number: 6; } variantes : .grid-gutter-1 { --grid-gutter: 1rem; }
113. automatisation <section class="grid grid-3 grid-gutter-1"> <div>Salade</div> <div>Tomate</div> <div>Oignon</div> <div>Picon bière</div> </section> Salade Tomate Oignon Picon bière http://codepen.io/raphaelgoetter/pen/LNWbzz?editors=1100
114. RESSOURCES
115. grid by example http://gridbyexample.com/
116. CSS grid garden http://cssgridgarden.com/
117. Firefox
118. Gridcheat http://kiwi.gg/gridcheat
119. oh, un livre ?!
121. RENDRE CSS PLUS SIMPLE Grid.Layout merci ! raphaël goetter