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