Upgrade to Pro — share decks privately, control downloads, hide ads and more …

50 nuances de grilles

Raphael Goetter
February 28, 2020

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.

Raphael Goetter

February 28, 2020
Tweet

More Decks by Raphael Goetter

Other Decks in Design

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