50 nuances de grilles

Transcript

1. 50
   nuances
   de grilles
   vue de ma chambre de l’Hôtel Bonaventure, Montréal
   

   View Slide

2. Raphaël Goetter
   

   View Slide

3. AND THE WINNER IS…
   

   View Slide

4. View Slide

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
   

   View Slide

6. échauffement
   rapide mise en bouche
   

   View Slide

7. 
   1/3
   
   2/3
   TODO!
   div
   div
   

   View Slide

8. l’une de ces deux
   méthodes utilise
   Bootstrap
   sauras-tu la retrouver ?
   

   View Slide

9. 
   
   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
   

   View Slide

10. 
    div
    div
    
    .container {
    display: grid;
    grid-template-columns: 1fr 2fr;
    }
    2
    

    View Slide

11. bootstrap 4 grid layout
    
    
    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
    div
    
    .container {
    display: grid;
    grid-template-columns: 1fr 2fr;
    }
    

    View Slide

12. 
    
    TODO!
    

    View Slide

13. 
    
    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
    

    View Slide

14. 
    div
    div
    div
    div
    
    .container {
    display: grid;
    grid-template-columns: 1fr 2fr;
    }
    2
    

    View Slide

15. 
    
    
    TODO!
    

    View Slide

16. 1
    

    View Slide

17. 
    div
    div
    div
    
    .container {
    display: grid;
    grid-template-columns: 1fr 2fr;
    }
    div:first-child {
    grid-row: span 2;
    }
    2
    

    View Slide

18. bootstrap grid layout
    

    View Slide

19. TU ME MONTRES ?
    bon c’est pas tout ça, mais…
    

    View Slide

20. hein marty ?
    Mais on
    faisait Ca en 1996
    avec !
    

    View Slide

21. Grid layout est virtuel
    
    Positionnements intuitifs
    
    Alignements variés
    
    Réordonnement facile
    
    Chevauchements possibles
    
    Responsive simplissime
    NOPE
    

    View Slide

22. layout grid layout
    

    View Slide

23. achetez le
    livre de
    Raphael
    oui Mais on
    faisait Ca en 2014
    avec flexbox !
    

    View Slide

24. View Slide

25. grid layout
    flexbox
    

    View Slide

26. ou
    KNACSS
    euh Mais on fait
    Ca aujourd'hui
    avec bootstrap !
    

    View Slide

27. View Slide

28. bootstrap.min.css (juste la grille)
    

    View Slide

29. .container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 15px;
    }
    
    aside { grid-column: span 3; }
    main { grid-column: span 9; }
    grid layout (5 lignes)
    

    View Slide

30. T’AS DES EXEMPLES ?
    super tout ça, mais…
    https://slate.com/
    

    View Slide

31. https://www.lemonde.fr/
    

    View Slide

32. https://codepen.io/andybarefoot/pen/wrXvLj
    

    View Slide

33. https://codepen.io/julesforrest/full/QaBvPe
    

    View Slide

34. https://codepen.io/raphaelgoetter/pen/aqzOxg
    

    View Slide

35. http://codepen.io/raphaelgoetter/pen/xwaoOP?editors=1100
    

    View Slide

36. https://codepen.io/raphaelgoetter/pen/QgQJBj?editors=1100
    

    View Slide

37. http://codepen.io/raphaelgoetter/pen/pgRQwv
    

    View Slide

38. https://codepen.io/knyttneve/pen/QVqyNg
    

    View Slide

39. https://codepen.io/victorjanin/pen/oGYvjK
    

    View Slide

40. SUPPORT
    DE GRID LAYOUT
    

    View Slide

41. https://caniuse.com/css-grid
    

    View Slide

42. glossaire
    pour bien comprendre des trucs ensuite
    

    View Slide

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

    View Slide

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

    View Slide

45. grid line
    ligne divisant la grille
    

    View Slide

46. grid track
    une colonne ou une rangée

    (espace entre deux grid lines)
    

    View Slide

47. grid cell
    intersection entre deux grid tracks

    (unité de positionnement dans la grille)
    

    View Slide

48. grid area
    zone d’une ou plusieurs cellules

    (une ou plusieurs grid cells)
    

    View Slide

49. unités et valeurs
    Photo credit: pasa47 via Visualhunt / CC BY
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

53. minmax()
    .grid-container {
    display: grid;
    grid-template-columns: minmax(100px, 20%) 1fr 1fr;
    }
    

    View Slide

54. construction de grilles
    

    View Slide

55. initialisation
    .ingrid {
    display: grid;
    }
    

    View Slide

56. colonnes
    .ingrid {
    display: grid;
    grid-template-columns: 100px 1fr;
    }
    

    View Slide

57. lignes
    .ingrid {
    display: grid;
    grid-template-columns: 100px 1fr;
    grid-template-rows: 50px 1fr;
    }
    

    View Slide

58. positionnement
    

    View Slide

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
    

    View Slide

60. positionnement « auto »
    .hagrid {
    display: grid;
    grid-template-columns: 100px 1fr;
    }
    nav
    header
    aside
    main
    nav header
    aside main
    

    View Slide

61. positionnement explicite
    .hagrid {
    display: grid;
    grid-template-columns: 100px 1fr;
    }
    nav header
    aside main
    nav
    header
    aside
    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;
    

    View Slide

62. positionnement explicite
    .hagrid {
    display: grid;
    grid-template-columns: 100px 1fr;
    }
    header
    aside main
    header
    aside
    main
    header {
    grid-column: 1 / 3;
    }
    raccourci de :
    grid-column-start: 1;
    grid-column-end: 3;
    

    View Slide

63. positionnement par « area »
    .hagrid {
    display: grid;
    grid-template-columns: 100px 1fr;
    grid-template-areas: "a b"
    "c d";
    }
    nav
    header
    aside
    main
    nav { grid-area: a; }
    header { grid-area: b; }
    aside { grid-area: c; }
    main { grid-area: d; }
    nav header
    aside main
    

    View Slide

64. positionnement par « area »
    .hagrid {
    display: grid;
    grid-template-columns: 100px 1fr;
    grid-template-areas: "a b"
    "a c";
    }
    nav
    header
    main
    nav { grid-area: a; }
    header { grid-area: b; }
    main { grid-area: c; }
    nav
    header
    main
    

    View Slide

65. QUIZ !
    

    View Slide

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

    View Slide

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;
    

    View Slide

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

    View Slide

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;
    

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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;
    

    View Slide

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

    View Slide

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
    

    View Slide

78. alignements
    

    View Slide

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
    

    View Slide

80. aligner la grille
    .grid-container {
    display: grid;
    }
    
    
    

    View Slide

81. aligner la grille
    .grid-container {
    display: grid;
    grid-template-columns: 15% 15% 15%;
    }
    
    
    

    View Slide

82. aligner la grille
    .grid-container {
    display: grid;
    grid-template-columns: 15% 15% 15%;
    justify-content: normal;
    }
    
    
    (=start)
    

    View Slide

83. aligner la grille
    .grid-container {
    display: grid;
    grid-template-columns: 15% 15% 15%;
    justify-content: end;
    }
    
    
    

    View Slide

84. aligner la grille
    .grid-container {
    display: grid;
    grid-template-columns: 15% 15% 15%;
    justify-content: center;
    }
    
    
    

    View Slide

85. aligner la grille
    .grid-container {
    display: grid;
    grid-template-columns: 15% 15% 15%;
    justify-content: space-between;
    }
    
    
    

    View Slide

86. aligner la grille
    .grid-container {
    display: grid;
    grid-template-columns: 15% 15% 15%;
    justify-content: space-around;
    }
    
    
    

    View Slide

87. aligner la grille
    .grid-container {
    display: grid;
    grid-template-columns: 15% 15% 15%;
    justify-content: space-evenly;
    }
    
    
    

    View Slide

88. aligner les items
    .grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    }
    
    
    

    View Slide

89. aligner les items
    .grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    }
    
    
    
    
    
    Salade Tomate Oignon
    

    View Slide

90. aligner les items
    .grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    justify-items: normal;
    }
    
    
    
    
    
    Salade Tomate Oignon
    (=stretch)
    

    View Slide

91. aligner les items
    .grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    justify-items: start;
    }
    
    
    
    
    
    Salade Tomate Oignon
    

    View Slide

92. aligner les items
    .grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    justify-items: end;
    }
    
    
    
    
    
    Salade Tomate Oignon
    

    View Slide

93. aligner les items
    .grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    justify-items: center;
    }
    
    
    
    
    
    Salade Tomate Oignon
    

    View Slide

94. aligner un item
    .grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    justify-items: center;
    }
    
    
    
    
    
    Salade Tomate Oignon
    .tomate {
    justify-self: end;
    }
    

    View Slide

95. aligner un item
    .grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    justify-items: center;
    }
    
    
    
    
    
    Salade
    Tomate
    Oignon
    .tomate {
    justify-self: end;
    align-self: end;
    }
    

    View Slide

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

    View Slide

97. un template responsive ?
    photo CC Loic Djim https://unsplash.com/@loic
    

    View Slide

98. chiche !
    

    View Slide

99. View Slide

100. View Slide

101. View Slide

102. ET C’EST
     PAS FINI !
     

     View Slide

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;
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

108. .grid {
     display: grid;
     }
     automatisation
     base :
     

     View Slide

109. .grid {
     display: grid;
     --grid-number: 1;
     --grid-gutter: 0;
     }
     automatisation
     base :
     http://caniuse.com/#feat=css-variables
     «variables CSS ❤
     

     View Slide

110. .grid {
     display: grid;
     --grid-number: 1;
     --grid-gutter: 0;
     grid-gap: var(--grid-gutter);
     }
     automatisation
     base :
     

     View Slide

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 :
     

     View Slide

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

     View Slide

113. automatisation
     
     Salade
     Tomate
     Oignon
     Picon bière
     
     Salade Tomate Oignon
     Picon bière
     http://codepen.io/raphaelgoetter/pen/LNWbzz?editors=1100
     

     View Slide

114. RESSOURCES
     

     View Slide

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

     View Slide

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

     View Slide

117. Firefox
     

     View Slide

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

     View Slide

119. oh, un livre ?!
     

     View Slide

120. View Slide

121. RENDRE CSS
     PLUS SIMPLE
     Grid.Layout
     merci !
     raphaël goetter
     

     View Slide