50 nuances de grilles

Adf4ff2212aea06456ca3c3bca95c0db?s=47 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.

Adf4ff2212aea06456ca3c3bca95c0db?s=128

Raphael Goetter

February 28, 2020
Tweet

Transcript

  1. 50 nuances de grilles vue de ma chambre de l’Hôtel

    Bonaventure, Montréal
  2. Raphaël Goetter

  3. AND THE WINNER IS…

  4. None
  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
  6. échauffement rapide mise en bouche

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

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

    ?
  9. <div class="container"> <div class="row no-gutters"> <div class="col-4">div</div> <div class="col-8">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
  10. <div class="container"> <div>div</div> <div>div</div> </div> .container { display: grid; grid-template-columns:

    1fr 2fr; } 2
  11. bootstrap 4 grid layout <div class="container"> <div class="row no-gutters"> <div

    class="col-4">div</div> <div class="col-8">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; } } <div class="container"> <div>div</div> <div>div</div> </div> .container { display: grid; grid-template-columns: 1fr 2fr; }
  12. <div> <div> <div> <div> TODO!

  13. <div class="container"> <div class="row no-gutters"> <div class="col-4">div</div> <div class="col-8">div</div> </div>

    <div class="row no-gutters"> <div class="col-4">div</div> <div class="col-8">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
  14. <div class="container"> <div>div</div> <div>div</div> <div>div</div> <div>div</div> </div> .container { display:

    grid; grid-template-columns: 1fr 2fr; } 2
  15. <div> <div> <div> TODO!

  16. 1

  17. <div class="container"> <div>div</div> <div>div</div> <div>div</div> </div> .container { display: grid;

    grid-template-columns: 1fr 2fr; } div:first-child { grid-row: span 2; } 2
  18. bootstrap grid layout

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

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

    <table> !
  21. Grid layout est virtuel Positionnements intuitifs Alignements variés Réordonnement facile

    Chevauchements possibles Responsive simplissime NOPE
  22. <table> layout grid layout

  23. achetez le livre de Raphael oui Mais on faisait Ca

    en 2014 avec flexbox !
  24. None
  25. grid layout flexbox

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

    !
  27. None
  28. bootstrap.min.css (juste la grille)

  29. .container { display: grid; grid-template-columns: repeat(12, 1fr); gap: 15px; }

    <aside> <main> aside { grid-column: span 3; } main { grid-column: span 9; } grid layout (5 lignes)
  30. T’AS DES EXEMPLES ? super tout ça, mais… https://slate.com/

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

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

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

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

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

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

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

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

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

  40. SUPPORT DE GRID LAYOUT

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

  42. glossaire pour bien comprendre des trucs ensuite

  43. grid container élément parent conteneur de la grille <section class="grid-container">

    <div>Salade</div> <div>Tomate</div> <div>Oignon</div> <div>Picon bière</div> </section>
  44. 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>
  45. grid line ligne divisant la grille

  46. grid track une colonne ou une rangée
 (espace entre deux

    grid lines)
  47. grid cell intersection entre deux grid tracks
 (unité de positionnement

    dans la grille)
  48. grid area zone d’une ou plusieurs cellules
 (une ou plusieurs

    grid cells)
  49. unités et valeurs Photo credit: pasa47 via Visualhunt / CC

    BY
  50. unité « fr » .grid-container { display: grid; grid-template-columns: 100px

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

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

    2fr 1fr; } fraction de l’espace disponible
  53. minmax() .grid-container { display: grid; grid-template-columns: minmax(100px, 20%) 1fr 1fr;

    }
  54. construction de grilles

  55. initialisation .ingrid { display: grid; }

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

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

    1fr; }
  58. positionnement

  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
  60. positionnement « auto » .hagrid { display: grid; grid-template-columns: 100px

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

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

    header aside main <header>header</header> <aside>aside</aside> <main>main</main> header { grid-column: 1 / 3; } raccourci de : grid-column-start: 1; grid-column-end: 3;
  63. positionnement par « area » .hagrid { display: grid; grid-template-columns:

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

    100px 1fr; grid-template-areas: "a b" "a c"; } <nav>nav</nav> <header>header</header> <main>main</main> nav { grid-area: a; } header { grid-area: b; } main { grid-area: c; } nav header main
  65. QUIZ !

  66. CAS 1 nav .ingrid { display: grid; grid-template-columns: 100px 300px;

    } nav { grid-column: 2 / 3; }
  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;
  68. CAS 2 nav .ingrid { display: grid; grid-template-columns: 100px 300px;

    } nav { grid-column: 2; }
  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;
  70. CAS 3 nav .ingrid { display: grid; grid-template-columns: 100px 300px;

    } nav { grid-column: 3; }
  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
  72. CAS 4 nav .ingrid { display: grid; grid-template-columns: 100px 300px;

    } nav { grid-column-end: 1; }
  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
  74. CAS 5 nav .ingrid { display: grid; grid-template-columns: 100px 300px;

    } nav { grid-column: 3 / 2; }
  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;
  76. CAS 6 nav .ingrid { display: grid; grid-template-columns: 100px 300px;

    } nav { grid-area: 2 / 1 / 4 / 2; }
  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
  78. alignements

  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
  80. aligner la grille .grid-container { display: grid; } <div class=“grid-container”>

    </div>
  81. aligner la grille .grid-container { display: grid; grid-template-columns: 15% 15%

    15%; } <div class=“grid-container”> </div>
  82. aligner la grille .grid-container { display: grid; grid-template-columns: 15% 15%

    15%; justify-content: normal; } <div class=“grid-container”> </div> (=start)
  83. aligner la grille .grid-container { display: grid; grid-template-columns: 15% 15%

    15%; justify-content: end; } <div class=“grid-container”> </div>
  84. aligner la grille .grid-container { display: grid; grid-template-columns: 15% 15%

    15%; justify-content: center; } <div class=“grid-container”> </div>
  85. aligner la grille .grid-container { display: grid; grid-template-columns: 15% 15%

    15%; justify-content: space-between; } <div class=“grid-container”> </div>
  86. aligner la grille .grid-container { display: grid; grid-template-columns: 15% 15%

    15%; justify-content: space-around; } <div class=“grid-container”> </div>
  87. aligner la grille .grid-container { display: grid; grid-template-columns: 15% 15%

    15%; justify-content: space-evenly; } <div class=“grid-container”> </div>
  88. aligner les items .grid-container { display: grid; grid-template-columns: 1fr 1fr

    1fr; } <div class=“grid-container”> </div>
  89. aligner les items .grid-container { display: grid; grid-template-columns: 1fr 1fr

    1fr; } <div class=“grid-container”> <div class=“salade”> <div class=“tomate”> <div class=“oignon”> </div> Salade Tomate Oignon
  90. aligner les items .grid-container { display: grid; grid-template-columns: 1fr 1fr

    1fr; justify-items: normal; } <div class=“grid-container”> <div class=“salade”> <div class=“tomate”> <div class=“oignon”> </div> Salade Tomate Oignon (=stretch)
  91. aligner les items .grid-container { display: grid; grid-template-columns: 1fr 1fr

    1fr; justify-items: start; } <div class=“grid-container”> <div class=“salade”> <div class=“tomate”> <div class=“oignon”> </div> Salade Tomate Oignon
  92. aligner les items .grid-container { display: grid; grid-template-columns: 1fr 1fr

    1fr; justify-items: end; } <div class=“grid-container”> <div class=“salade”> <div class=“tomate”> <div class=“oignon”> </div> Salade Tomate Oignon
  93. aligner les items .grid-container { display: grid; grid-template-columns: 1fr 1fr

    1fr; justify-items: center; } <div class=“grid-container”> <div class=“salade”> <div class=“tomate”> <div class=“oignon”> </div> Salade Tomate Oignon
  94. aligner un item .grid-container { display: grid; grid-template-columns: 1fr 1fr

    1fr; justify-items: center; } <div class=“grid-container”> <div class=“salade”> <div class=“tomate”> <div class=“oignon”> </div> Salade Tomate Oignon .tomate { justify-self: end; }
  95. aligner un item .grid-container { display: grid; grid-template-columns: 1fr 1fr

    1fr; justify-items: center; } <div class=“grid-container”> <div class=“salade”> <div class=“tomate”> <div class=“oignon”> </div> Salade Tomate Oignon .tomate { justify-self: end; align-self: end; }
  96. .grid-container { display: grid; justify-content: center; align-content: center; } salade

    tomate oignon picon bière en plein dans le mille !
  97. un template responsive ? photo CC Loic Djim https://unsplash.com/@loic

  98. chiche !

  99. None
  100. None
  101. None
  102. ET C’EST PAS FINI !

  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;
  104. Salade Tomate Oignon .grid-container { display: grid; grid-template-columns: repeat(4, 1fr);

    } repeat() Picon bière
  105. 1 2 3 .grid-container { display: grid; grid-template-columns: repeat(3, 50px

    100px); } repeat() 4 5 6
  106. Salade Tomate Oignon .grid-container { display: grid; grid-template-columns: repeat(auto-fit, 100px);

    } auto-fit Picon bière
  107. .grid-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); } maxi

    combo ! http://codepen.io/raphaelgoetter/pen/pgRQwv
  108. .grid { display: grid; } automatisation base :

  109. .grid { display: grid; --grid-number: 1; --grid-gutter: 0; } automatisation

    base : http://caniuse.com/#feat=css-variables «variables CSS ❤
  110. .grid { display: grid; --grid-number: 1; --grid-gutter: 0; grid-gap: var(--grid-gutter);

    } automatisation base :
  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 :
  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; }
  113. automatisation <section class="grid grid-3 grid-gutter-1"> <div>Salade</div> <div>Tomate</div> <div>Oignon</div> <div>Picon bière</div>

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

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

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

  117. Firefox

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

  119. oh, un livre ?!

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