Atelier CSS Grid Layout

Transcript

1. GRID LAYOUT l’atelier qui va vous réconcilier avec CSS (mais pas avec IE) raphaël goetter
2. kiwi.gg/gridercices t’as du wi-fi toi ?
3. je suis alsacien raphaël goetter
4. ✓ forum, tutos, emploi ✓ depuis 2003 ✓ 30000 visiteurs / jour ✓ 50000 membres sur le forum ALSACREATIONS.COM communauté d’apprentissage
5. ALSACREATIONS.FR agence web, organisme de formation ✓ on fait des sites web pour des clients ✓ depuis 2006 ✓ on est une petite équipe de 7-8 ✓ on a un peu l’accent alsacien
6. ON LES A FORMÉS ils sont devenus des ninjas !
7. TU ME MONTRES?
8. INTRODUCTION
9. UNE SPEC W3C FINALISÉE
10. LES CONCEPTS
 DE GRILLE
11. <section class="grid-container"> <div>Salade</div> <div>Tomate</div> <div>Oignon</div> <div>Picon bière</div> </section> grid container élément parent conteneur de la grille
12. 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>
13. grid line ligne divisant la grille
14. grid track piste entre deux grid line
15. grid cell intersection de deux grid track
16. grid area zone composée d’une ou plusieurs grid cell
17. LES PROPRIÉTÉS
 DE GRILLE
18. sur le Grid Container initialisation de la Grille • display: grid • display: inline-grid rangées et colonnes • grid-template-rows • grid-template-columns • grid-template-areas flux des éléments • grid-auto-rows • grid-auto-columns • grid-auto-flow gouttières • row-gap • column-gap alignement général • justify-content • align-content • justify-items • align-items
19. sur le Grid Item placement dans la Grille • grid-row-start • grid-row-end • grid-column-start • grid-column-end • grid-area alignement individuel • justify-self • align-self ordonnancement • order
20. GRILLE EXPLICITE -
 GRILLE IMPLICITE
21. .ingrid { display: grid; }
22. .ingrid { display: grid; grid-template-columns: 100px 300px; }
23. .ingrid { display: grid; grid-template-columns: 100px 300px; grid-template-rows: 50px 100px; } Grille explicite Grille implicite
24. LE FLUX DES ÉLÉMENTS
25. flux horizontal (par défaut) .ingrid { display: grid; grid-template-columns: 100px 300px; grid-template-rows: 50px 100px; }
26. flux vertical .ingrid { display: grid; grid-template-columns: 100px 300px; grid-template-rows: 50px 100px; grid-auto-flow: column; }
27. auto-rows .ingrid { display: grid; grid-template-columns: 100px 300px; grid-template-rows: 50px 100px; grid-auto-columns: 5em; grid-auto-rows: minmax(3em, auto); } auto-columns
28. 1 2 3 bonus: 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;
29. placement automatique = placement selon le flux
30. EXERCICE ! échauffement
31. UNITÉS ET VALEURS DE GRID LAYOUT
32. unité « fr » .grid-container { display: grid; grid-template-columns: 100px 100px 1fr; } fraction de l’espace disponible
33. unité « fr » .grid-container { display: grid; grid-template-columns: 100px 1fr 1fr; } fraction de l’espace disponible
34. unité « fr » .grid-container { display: grid; grid-template-columns: 100px 2fr 1fr; } fraction de l’espace disponible
35. valeur « auto » .grid-container { display: grid; grid-template-rows: auto 1fr; } taille du contenu
36. minmax() .grid-container { display: grid; grid-template-columns: minmax(100px, 20%) 1fr 1fr; } taille souhaitée, mais avec un minimum
37. EXERCICE ! échauffement - étape 3
38. PLACEMENT
 EXPLICITE
39. auto-placement nav header aside main .hagrid { display: grid; grid-template-columns: 100px 300px; grid-template-rows: 50px 100px; } footer <nav>nav</nav> <header>header</header> <aside>aside</aside> <main>main</main> <footer>footer</footer>
40. nav header aside main .hagrid { display: grid; grid-template-columns: 100px 300px; grid-template-rows: 50px 100px; } footer <nav>nav</nav> <header>header</header> <aside>aside</aside> <main>main</main> <footer>footer</footer> footer { grid-column: 2; grid-row: 3; } placement explicite raccourci de : grid-column-start: 2; grid-column-end: 3; grid-row-start: 3; grid-row-end: 4;
41. nav header main .hagrid { display: grid; grid-template-columns: 100px 300px; grid-template-rows: 50px 100px; } footer <nav>nav</nav> <header>header</header> <aside>aside</aside> <main>main</main> <footer>footer</footer> footer { grid-column: 2; grid-row: 3; } raccourci de : grid-column-start: 1; grid-column-end: 2; grid-row-start: 2; grid-row-end: 4; aside { grid-column: 1; grid-row: 2 / 4; } aside
42. placement explicite = grid-column + grid-row
43. ZONES NOMMÉES
44. nav header .hagrid { display: grid; grid-template-columns: 100px 300px; grid-template-areas: "un deux"; } <nav>nav</nav> <header>header</header> nav { grid-area: un; } header { grid-area: deux; }
45. nav aside .hagrid { display: grid; grid-template-columns: 100px 300px; grid-template-areas: "nav header" "aside header" "footer footer"; } <nav>nav</nav> <header>header</header> <aside>aside</aside> <main>main</main> <footer>footer</footer> header nav { grid-area: nav; } header { grid-area: header; } aside { grid-area: aside; } footer { grid-area: footer; } footer
46. placement nommé = grid-area
47. FUSION DE COLONNES ET DE RANGÉES
48. Salade Tomate Oignon .grid-container { display: grid; grid: ". ."; } fusion avec « / » Salade Tomate Oignon .grid-container { display: grid; grid: ". ."; } .tomate { grid-row: auto / 3; }
49. Salade Tomate Oignon .grid-container { display: grid; grid: ". ."; } fusion avec area Salade Tomate Oignon .grid-container { display: grid; grid: ". ."; grid-template-areas: "a b" "c b"; } .tomate { grid-area: b; }
50. Salade Tomate Oignon .grid-container { display: grid; grid: ". ."; } fusion avec span Salade Tomate Oignon .grid-container { display: grid; grid: ". ."; } .tomate { grid-row: auto / span 2; }
51. .container { display: grid; grid-template-columns: repeat(6, 1fr); grid-gap: 10px; } 1 2 3 4 5 6 .span-2 .span-2 .span-2 .span-3 .span-3 .span-2 { grid-column: span 2; } .span-3 { grid-column: span 3; }
52. .container { display: grid; grid-template-columns: repeat(6, 1fr); grid-gap: 10px; } 1 2 5 6 .span-2 .span-2 .span-3 .span-3 .big { grid-row: span 2; grid-column: span 2; } .big
53. EXERCICE ! base positionnement
54. (QUELQUES) RACCOURCIS • grid-template : 
 raccourci de grid-template-rows et grid-template columns • grid-row : 
 raccourci de grid-row-start et grid-row-end • grid-column : 
 raccourci de grid-column-start et grid-column-end, • grid-area : 
 multi-raccourci de grid-row-start, grid-column-start, grid- row-end et grid-column-end.
55. QUIZ !
56. CAS 1 nav .ingrid { display: grid; grid-template-columns: 100px 300px; } nav { grid-column: 2 / 3; }
57. 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;
58. CAS 2 nav .ingrid { display: grid; grid-template-columns: 100px 300px; } nav { grid-column: 2; }
59. 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;
60. CAS 3 nav .ingrid { display: grid; grid-template-columns: 100px 300px; } nav { grid-column: 3; }
61. 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
62. CAS 4 nav .ingrid { display: grid; grid-template-columns: 100px 300px; } nav { grid-column-end: 1; }
63. 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
64. CAS 5 nav .ingrid { display: grid; grid-template-columns: 100px 300px; } nav { grid-column: 3 / 2; }
65. 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;
66. CAS 6 nav .ingrid { display: grid; grid-template-columns: 100px 300px; } nav { grid-area: 2 / 1 / 4 / 2; }
67. 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
68. MODIFIER L’ORDRE D’AFFICHAGE
69. order salade tomate oignon .grid-container { display: grid; grid: ". ."; } oignon salade tomate .grid-container { display: grid; grid: ". ."; } .oignon { order: -1; } raccourci de plein de trucs: grid-template-rows + grid-template-columns grid-auto-rows + grid-auto-columns grid-template-areas + grid-auto-flow
70. APPLIQUER DES GOUTTIÈRES
71. gouttières comment faisait-on avant Grid Layout ? .flex-container { display: flex; flex-wrap: wrap; margin-left: -10px; margin-right: -10px; } .flex-item { width: calc(50% - 20px); margin-left: 10px; margin-right: 10px; } Salade Tomate Oignon Picon bière
72. gouttières comment fait-on depuis Grid Layout ? Salade Tomate Oignon Picon bière .grid-container { display: grid; grid: ". ."; gap: 20px; } (grid-)
73. EXERCICE ! tri d’éléments
74. ALIGNEMENT DES
 ÉLÉMENTS
75. alignement horizontal justify-content alignement horizontal des grid-cells justify-items alignement horizontal des grid-items justify-self alignement individuel d’un grid-item alignement vertical align-content alignement vertical des grid-cells align-items alignement vertical des grid-items align-self alignement individuel d’un grid-item
76. justify-content alignement horizontal des grid cells align-content alignement vertical des grid cells
77. justify-content justify-content: normal; Salade Tomate justify-content: start; Salade Tomate justify-content: end; Salade Tomate justify-content: center; Salade Tomate justify-content: space-between; Salade Tomate
78. justify-items alignement horizontal des grid items align-items alignement vertical des grid items
79. justify-items justify-items: normal; Salade Tomate justify-items: start; Salade Tomate justify-items: end; Salade Tomate justify-items: center; Salade Tomate justify-items: space-between; Salade Tomate
80. justify-self alignement horizontal d’un grid item align-self alignement vertical d’un grid item
81. justify-self .grid-container { display: grid; justify-items: start; } .oignon { justify-self: end; } salade tomate oignon picon bière
82. .grid-container { display: grid; justify-content: center; align-content: center; } salade tomate oignon picon bière en plein dans le mille !
83. EXERCICE ! alignements
84. RÉPÉTER DES MOTIFS
85. Salade Tomate Oignon .grid-container { display: grid; grid-template-columns: repeat(4, 1fr); } repeat() Picon bière
86. 1 2 3 .grid-container { display: grid; grid-template-columns: repeat(3, 50px 100px); } repeat() 4 5 6
87. Salade Tomate Oignon .grid-container { display: grid; grid-template-columns: repeat(auto-fit, 100px); } auto-fit Picon bière
88. .grid-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); } maxi combo ! http://codepen.io/raphaelgoetter/pen/pgRQwv
89. EXERCICE ! galerie d’images
90. photo CC Loic Djim https://unsplash.com/@loic UN TEMPLATE RESPONSIVE ?
91. chiche !
92. <div class="container"> <header>header</header> <nav>nav</nav> <h1 class="title">title</h1> <article>article 1</article> <article>article 2</article> <article>article 3</article> <footer>footer</footer> </div> HTML : header { grid-area: header; } nav { grid-area: nav; } .title { grid-area: title; } article { /* rien */ } footer { grid-area: footer; } placement :
93. .container { display: grid; grid-template-columns: 1fr; grid-template-areas: "nav" "header" "title" "." "." "." "footer"; } CSS mobile first !
94. @media (min-width: 544px) { .container { grid-template-columns: 10em 1fr; grid-template-areas: "header header" "title title" "nav ." "nav ." "nav ." "footer footer"; } } écrans de taille moyenne :
95. @media (min-width: 992px) { .container { grid-template-columns: 10em 1fr 1fr 1fr; grid-template-rows: auto auto 1fr auto; grid-template-areas: "header header header header" "nav title title title" "nav . . ." "footer footer footer footer"; } } grands écrans :
96. SUPPORT
 DE GRID LAYOUT
97. natif 10-11 * * ancienne spécification (où il manque des trucs chouettes)
98. natif polyfill 10-11
99. natif polyfill total 10-11
100. grid polyfill https://github.com/FremyCompany/css-grid-polyfill
101. gridbugs https://github.com/rachelandrew/gridbugs
102. AMÉLIORATION PROGRESSIVE ouais tu sais c’est quoi ?
103. RÈGLES D’UNIVERSALITÉ 1. S’adapter à tous les visiteurs (Sémantique, Accessibilité : title, alt, contrastes, ARIA) 2. S’adapter à tous les devices (Responsive, Mobile First) 3. S’adapter à tous les navigateurs (Amélioration progressive) 4. S’adapter à toutes les connexions (Performance) une page web doit : PS : « s’adapter » != « identique partout »
104. mon design s’adapte à tous les devices, je pratique le responsive web design yeah! beau gosse! GG!
105. mon design s’adapte à tous les navigateurs, je pratique l’amélioration progressive aaah! ca ne s’affiche meme pas pareil sur IE ?!
106. amélioration progressive https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_am%C3%A9lioration_progressive
107. @supports https://www.alsacreations.com/article/lire/1617-detecter-support-fonctionnalites-avec-supports.html à la rescousse ! .container { display: flex; } @supports (display: grid) { .container { display: grid; } } fallback en flexbox, float ou table-cell
108. le cas IE https://www.alsacreations.com/tuto/lire/1771-css-grid-layout-en-production.html it’s complicated…
109. en vrai ? https://slate.com/
110. grid examples http://www.gridexamples.com/
111. ET C’EST PAS FINI !
112. Salade Tomate Oignon .grid-container { display: grid; grid: ". ."; } valeurs négatives Salade Tomate Oignon .grid-container { display: grid; grid: ". ."; } .salade { grid-column: 1 / -1; } 1 2 3 -3 -2 -1
113. RESSOURCES
114. 114 grid by example http://gridbyexample.com/
115. 115 Gridcheat http://kiwi.gg/gridcheat
116. 116 Gridbugs https://github.com/rachelandrew/gridbugs
117. 117 Grid vs IE https://www.alsacreations.com/tuto/lire/1771-css-grid-layout-en-production.html
118. 118 Firefox Grid inspector
119. 119 CSS grid garden http://cssgridgarden.com/
120. EXERCICES !
121. merci ! raphaël goetter slides sur
 www.speakerdeck.com/goetter agence web organisme de formation www.alsacreations.fr forum communauté www.alsacreations.com