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 full-size slide

  2. Raphaël Goetter

    View full-size slide

  3. AND THE WINNER IS…

    View full-size slide

  4. 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 full-size slide

  5. échauffement
    rapide mise en bouche

    View full-size slide


  6. 1/3

    2/3
    TODO!
    div
    div

    View full-size slide

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

    View full-size slide



  8. 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 full-size slide


  9. div
    div

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

    View full-size slide

  10. 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 full-size slide



  11. 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 full-size slide


  12. div
    div
    div
    div

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

    View full-size slide


  13. div
    div
    div

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

    View full-size slide

  14. bootstrap grid layout

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  17. Grid layout est virtuel

    Positionnements intuitifs

    Alignements variés

    Réordonnement facile

    Chevauchements possibles

    Responsive simplissime
    NOPE

    View full-size slide

  18. layout grid layout

    View full-size slide

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

    View full-size slide

  20. grid layout
    flexbox

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  23. .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 full-size slide

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

    View full-size slide

  25. https://www.lemonde.fr/

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  34. SUPPORT
    DE GRID LAYOUT

    View full-size slide

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

    View full-size slide

  36. glossaire
    pour bien comprendre des trucs ensuite

    View full-size slide

  37. grid container
    élément parent conteneur de la grille

    Salade
    Tomate
    Oignon
    Picon bière

    View full-size slide

  38. grid item
    enfant direct d’un grid container

    Salade
    Tomate
    Oignon
    Picon bière

    View full-size slide

  39. grid line
    ligne divisant la grille

    View full-size slide

  40. grid track
    une colonne ou une rangée

    (espace entre deux grid lines)

    View full-size slide

  41. grid cell
    intersection entre deux grid tracks

    (unité de positionnement dans la grille)

    View full-size slide

  42. grid area
    zone d’une ou plusieurs cellules

    (une ou plusieurs grid cells)

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  48. construction de grilles

    View full-size slide

  49. initialisation
    .ingrid {
    display: grid;
    }

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  52. positionnement

    View full-size slide

  53. 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 full-size slide

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

    View full-size slide

  55. 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 full-size slide

  56. 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 full-size slide

  57. 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 full-size slide

  58. 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 full-size slide

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

    View full-size slide

  60. 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 full-size slide

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

    View full-size slide

  62. 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 full-size slide

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

    View full-size slide

  64. 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 full-size slide

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

    View full-size slide

  66. 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 full-size slide

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

    View full-size slide

  68. 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 full-size slide

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

    View full-size slide

  70. 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 full-size slide

  71. 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 full-size slide

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


    View full-size slide

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


    View full-size slide

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


    (=start)

    View full-size slide

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


    View full-size slide

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


    View full-size slide

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


    View full-size slide

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


    View full-size slide

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


    View full-size slide

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


    View full-size slide

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





    Salade Tomate Oignon

    View full-size slide

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





    Salade Tomate Oignon
    (=stretch)

    View full-size slide

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





    Salade Tomate Oignon

    View full-size slide

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





    Salade Tomate Oignon

    View full-size slide

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





    Salade Tomate Oignon

    View full-size slide

  86. aligner un item
    .grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    justify-items: center;
    }





    Salade Tomate Oignon
    .tomate {
    justify-self: end;
    }

    View full-size slide

  87. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  90. ET C’EST
    PAS FINI !

    View full-size slide

  91. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  99. .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 full-size slide

  100. .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 full-size slide

  101. automatisation

    Salade
    Tomate
    Oignon
    Picon bière

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  105. oh, un livre ?!

    View full-size slide

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

    View full-size slide