Atelier CSS Grid Layout

Transcript

1. GRID LAYOUT
   l’atelier qui va vous réconcilier avec CSS (mais pas avec IE)
   raphaël goetter
   

   View Slide

2. kiwi.gg/gridercices
   t’as du wi-fi toi ?
   

   View Slide

3. je suis alsacien
   raphaël goetter
   

   View Slide

4. ✓ forum, tutos, emploi
   ✓ depuis 2003
   ✓ 30000 visiteurs / jour
   ✓ 50000 membres sur le forum
   ALSACREATIONS.COM
   communauté d’apprentissage
   

   View Slide

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
   

   View Slide

6. ON LES A FORMÉS
   ils sont devenus des ninjas !
   

   View Slide

7. TU ME MONTRES?
   

   View Slide

8. INTRODUCTION
   

   View Slide

9. UNE SPEC W3C FINALISÉE
   

   View Slide

10. LES CONCEPTS

    DE GRILLE
    

    View Slide

11. 
    Salade
    Tomate
    Oignon
    Picon bière
    
    grid container
    élément parent conteneur de la grille
    

    View Slide

12. grid item
    enfant direct d’un grid container
    
    Salade
    Tomate
    Oignon
    Picon bière
    
    

    View Slide

13. grid line
    ligne divisant la grille
    

    View Slide

14. grid track
    piste entre deux grid line
    

    View Slide

15. grid cell
    intersection de deux grid track
    

    View Slide

16. grid area
    zone composée d’une ou plusieurs grid cell
    

    View Slide

17. LES PROPRIÉTÉS

    DE GRILLE
    

    View Slide

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
    

    View Slide

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
    

    View Slide

20. GRILLE
    EXPLICITE
    -

    GRILLE
    IMPLICITE
    

    View Slide

21. .ingrid {
    display: grid;
    }
    

    View Slide

22. .ingrid {
    display: grid;
    grid-template-columns: 100px 300px;
    }
    

    View Slide

23. .ingrid {
    display: grid;
    grid-template-columns: 100px 300px;
    grid-template-rows: 50px 100px;
    }
    Grille explicite
    Grille implicite
    

    View Slide

24. LE FLUX
    DES ÉLÉMENTS
    

    View Slide

25. flux horizontal (par défaut)
    .ingrid {
    display: grid;
    grid-template-columns: 100px 300px;
    grid-template-rows: 50px 100px;
    }
    

    View Slide

26. flux vertical
    .ingrid {
    display: grid;
    grid-template-columns: 100px 300px;
    grid-template-rows: 50px 100px;
    grid-auto-flow: column;
    }
    

    View Slide

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
    

    View Slide

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;
    

    View Slide

29. placement automatique
    =
    placement selon le flux
    

    View Slide

30. EXERCICE !
    échauffement
    

    View Slide

31. UNITÉS ET VALEURS
    DE GRID LAYOUT
    

    View Slide

32. unité « fr »
    .grid-container {
    display: grid;
    grid-template-columns: 100px 100px 1fr;
    }
    fraction de l’espace disponible
    

    View Slide

33. unité « fr »
    .grid-container {
    display: grid;
    grid-template-columns: 100px 1fr 1fr;
    }
    fraction de l’espace disponible
    

    View Slide

34. unité « fr »
    .grid-container {
    display: grid;
    grid-template-columns: 100px 2fr 1fr;
    }
    fraction de l’espace disponible
    

    View Slide

35. valeur « auto »
    .grid-container {
    display: grid;
    grid-template-rows: auto 1fr;
    }
    taille du contenu
    

    View Slide

36. minmax()
    .grid-container {
    display: grid;
    grid-template-columns: minmax(100px, 20%) 1fr 1fr;
    }
    taille souhaitée, mais avec un minimum
    

    View Slide

37. EXERCICE !
    échauffement - étape 3
    

    View Slide

38. PLACEMENT

    EXPLICITE
    

    View Slide

39. auto-placement
    nav header
    aside main
    .hagrid {
    display: grid;
    grid-template-columns: 100px 300px;
    grid-template-rows: 50px 100px;
    }
    footer
    nav
    header
    aside
    main
    footer
    

    View Slide

40. nav header
    aside main
    .hagrid {
    display: grid;
    grid-template-columns: 100px 300px;
    grid-template-rows: 50px 100px;
    }
    footer
    nav
    header
    aside
    main
    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;
    

    View Slide

41. nav header
    main
    .hagrid {
    display: grid;
    grid-template-columns: 100px 300px;
    grid-template-rows: 50px 100px;
    }
    footer
    nav
    header
    aside
    main
    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
    

    View Slide

42. placement explicite
    =
    grid-column + grid-row
    

    View Slide

43. ZONES
    NOMMÉES
    

    View Slide

44. nav header
    .hagrid {
    display: grid;
    grid-template-columns: 100px 300px;
    grid-template-areas: "un deux";
    }
    nav
    header
    nav {
    grid-area: un;
    }
    header {
    grid-area: deux;
    }
    

    View Slide

45. nav
    aside
    .hagrid {
    display: grid;
    grid-template-columns: 100px 300px;
    grid-template-areas: "nav header"
    "aside header"
    "footer footer";
    }
    nav
    header
    aside
    main
    footer
    header
    nav {
    grid-area: nav;
    }
    header {
    grid-area: header;
    }
    aside {
    grid-area: aside;
    }
    footer {
    grid-area: footer;
    }
    footer
    

    View Slide

46. placement nommé
    =
    grid-area
    

    View Slide

47. FUSION DE COLONNES
    ET DE RANGÉES
    

    View Slide

48. Salade Tomate
    Oignon
    .grid-container {
    display: grid;
    grid: ". .";
    }
    fusion avec « / »
    Salade
    Tomate
    Oignon
    .grid-container {
    display: grid;
    grid: ". .";
    }
    .tomate {
    grid-row: auto / 3;
    }
    

    View Slide

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;
    }
    

    View Slide

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;
    }
    

    View Slide

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; }
    

    View Slide

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
    

    View Slide

53. EXERCICE !
    base positionnement
    

    View Slide

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.
    

    View Slide

55. QUIZ !
    

    View Slide

56. CAS 1
    nav
    .ingrid {
    display: grid;
    grid-template-columns: 100px 300px;
    }
    nav {
    grid-column: 2 / 3;
    }
    

    View Slide

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;
    

    View Slide

58. CAS 2
    nav
    .ingrid {
    display: grid;
    grid-template-columns: 100px 300px;
    }
    nav {
    grid-column: 2;
    }
    

    View Slide

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;
    

    View Slide

60. CAS 3
    nav
    .ingrid {
    display: grid;
    grid-template-columns: 100px 300px;
    }
    nav {
    grid-column: 3;
    }
    

    View Slide

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
    

    View Slide

62. CAS 4
    nav
    .ingrid {
    display: grid;
    grid-template-columns: 100px 300px;
    }
    nav {
    grid-column-end: 1;
    }
    

    View Slide

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
    

    View Slide

64. CAS 5
    nav
    .ingrid {
    display: grid;
    grid-template-columns: 100px 300px;
    }
    nav {
    grid-column: 3 / 2;
    }
    

    View Slide

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;
    

    View Slide

66. CAS 6
    nav
    .ingrid {
    display: grid;
    grid-template-columns: 100px 300px;
    }
    nav {
    grid-area: 2 / 1 / 4 / 2;
    }
    

    View Slide

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
    

    View Slide

68. MODIFIER L’ORDRE
    D’AFFICHAGE
    

    View Slide

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
    

    View Slide

70. APPLIQUER
    DES GOUTTIÈRES
    

    View Slide

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
    

    View Slide

72. gouttières
    comment fait-on depuis Grid Layout ?
    Salade Tomate
    Oignon Picon bière
    .grid-container {
    display: grid;
    grid: ". .";
    gap: 20px;
    }
    (grid-)
    

    View Slide

73. EXERCICE !
    tri d’éléments
    

    View Slide

74. ALIGNEMENT DES

    ÉLÉMENTS
    

    View Slide

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
    

    View Slide

76. justify-content
    alignement horizontal des grid cells
    align-content
    alignement vertical des grid cells
    

    View Slide

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
    

    View Slide

78. justify-items
    alignement horizontal des grid items
    align-items
    alignement vertical des grid items
    

    View Slide

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
    

    View Slide

80. justify-self
    alignement horizontal d’un grid item
    align-self
    alignement vertical d’un grid item
    

    View Slide

81. justify-self
    .grid-container {
    display: grid;
    justify-items: start;
    }
    .oignon {
    justify-self: end;
    }
    salade
    tomate
    oignon
    picon bière
    

    View Slide

82. .grid-container {
    display: grid;
    justify-content: center;
    align-content: center;
    }
    salade
    tomate
    oignon
    picon bière
    en plein dans le mille !
    

    View Slide

83. EXERCICE !
    alignements
    

    View Slide

84. RÉPÉTER
    DES MOTIFS
    

    View Slide

85. Salade Tomate Oignon
    .grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    }
    repeat()
    Picon bière
    

    View Slide

86. 1 2 3
    .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 50px 100px);
    }
    repeat()
    4 5 6
    

    View Slide

87. Salade Tomate Oignon
    .grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, 100px);
    }
    auto-fit
    Picon
    bière
    

    View Slide

88. .grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    }
    maxi combo !
    http://codepen.io/raphaelgoetter/pen/pgRQwv
    

    View Slide

89. EXERCICE !
    galerie d’images
    

    View Slide

90. photo CC Loic Djim https://unsplash.com/@loic
    UN TEMPLATE
    RESPONSIVE ?
    

    View Slide

91. chiche !
    

    View Slide

92. 
    header
    nav
    title
    article 1
    article 2
    article 3
    footer
    
    HTML :
    header { grid-area: header; }
    nav { grid-area: nav; }
    .title { grid-area: title; }
    article { /* rien */ }
    footer { grid-area: footer; }
    placement :
    

    View Slide

93. .container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "nav"
    "header"
    "title"
    "."
    "."
    "."
    "footer";
    }
    CSS mobile first !
    

    View Slide

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 :
    

    View Slide

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 :
    

    View Slide

96. SUPPORT

    DE GRID LAYOUT
    

    View Slide

97. natif
    10-11
    *
    * ancienne spécification (où il manque des trucs chouettes)
    

    View Slide

98. natif
    polyfill
    10-11
    

    View Slide

99. natif
    polyfill
    total
    10-11
    

    View Slide

100. grid polyfill
     https://github.com/FremyCompany/css-grid-polyfill
     

     View Slide

101. gridbugs
     https://github.com/rachelandrew/gridbugs
     

     View Slide

102. AMÉLIORATION
     PROGRESSIVE
     ouais tu sais c’est quoi ?
     

     View Slide

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 »
     

     View Slide

104. mon design s’adapte à tous les devices,
     je pratique le
     responsive web design
     yeah!
     beau gosse!
     GG!
     

     View Slide

105. mon design s’adapte à tous les navigateurs,
     je pratique
     l’amélioration progressive
     aaah!
     ca ne s’affiche meme
     pas pareil sur IE ?!
     

     View Slide

106. amélioration progressive
     https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_am%C3%A9lioration_progressive
     

     View Slide

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
     

     View Slide

108. le cas IE
     https://www.alsacreations.com/tuto/lire/1771-css-grid-layout-en-production.html
     it’s complicated…
     

     View Slide

109. en vrai ?
     https://slate.com/
     

     View Slide

110. grid examples
     http://www.gridexamples.com/
     

     View Slide

111. ET C’EST
     PAS FINI !
     

     View Slide

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
     

     View Slide

113. RESSOURCES
     

     View Slide

114. 114
     grid by example
     http://gridbyexample.com/
     

     View Slide

115. 115
     Gridcheat
     http://kiwi.gg/gridcheat
     

     View Slide

116. 116
     Gridbugs
     https://github.com/rachelandrew/gridbugs
     

     View Slide

117. 117
     Grid vs IE
     https://www.alsacreations.com/tuto/lire/1771-css-grid-layout-en-production.html
     

     View Slide

118. 118
     Firefox Grid inspector
     

     View Slide

119. 119
     CSS grid garden
     http://cssgridgarden.com/
     

     View Slide

120. EXERCICES !
     

     View Slide

121. merci !
     raphaël goetter
     slides sur

     www.speakerdeck.com/goetter
     agence web
     organisme de formation
     www.alsacreations.fr
     forum
     communauté
     www.alsacreations.com
     

     View Slide