Atelier CSS Grid Layout

Adf4ff2212aea06456ca3c3bca95c0db?s=47 Raphael Goetter
October 07, 2018

Atelier CSS Grid Layout

Adf4ff2212aea06456ca3c3bca95c0db?s=128

Raphael Goetter

October 07, 2018
Tweet

Transcript

  1. GRID LAYOUT l’atelier qui va vous réconcilier avec CSS (mais

    pas avec IE) raphaël goetter
  2. kiwi.gg/gridercices t’as du wi-fi toi ?

  3. je suis alsacien raphaël goetter

  4. ✓ forum, tutos, emploi ✓ depuis 2003 ✓ 30000 visiteurs

    / jour ✓ 50000 membres sur le forum ALSACREATIONS.COM communauté d’apprentissage
  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
  6. ON LES A FORMÉS ils sont devenus des ninjas !

  7. TU ME MONTRES?

  8. INTRODUCTION

  9. UNE SPEC W3C FINALISÉE

  10. LES CONCEPTS
 DE GRILLE

  11. <section class="grid-container"> <div>Salade</div> <div>Tomate</div> <div>Oignon</div> <div>Picon bière</div> </section> grid container

    élément parent conteneur de la grille
  12. 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>
  13. grid line ligne divisant la grille

  14. grid track piste entre deux grid line

  15. grid cell intersection de deux grid track

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

  17. LES PROPRIÉTÉS
 DE GRILLE

  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
  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
  20. GRILLE EXPLICITE -
 GRILLE IMPLICITE

  21. .ingrid { display: grid; }

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

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

    } Grille explicite Grille implicite
  24. LE FLUX DES ÉLÉMENTS

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

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

    50px 100px; grid-auto-flow: column; }
  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
  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;
  29. placement automatique = placement selon le flux

  30. EXERCICE ! échauffement

  31. UNITÉS ET VALEURS DE GRID LAYOUT

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

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

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

    2fr 1fr; } fraction de l’espace disponible
  35. valeur « auto » .grid-container { display: grid; grid-template-rows: auto

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

    } taille souhaitée, mais avec un minimum
  37. EXERCICE ! échauffement - étape 3

  38. PLACEMENT
 EXPLICITE

  39. auto-placement nav header aside main .hagrid { display: grid; grid-template-columns:

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

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

    grid-template-rows: 50px 100px; } footer <nav>nav</nav> <header>header</header> <aside>aside</aside> <main>main</main> <footer>footer</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
  42. placement explicite = grid-column + grid-row

  43. ZONES NOMMÉES

  44. nav header .hagrid { display: grid; grid-template-columns: 100px 300px; grid-template-areas:

    "un deux"; } <nav>nav</nav> <header>header</header> nav { grid-area: un; } header { grid-area: deux; }
  45. nav aside .hagrid { display: grid; grid-template-columns: 100px 300px; grid-template-areas:

    "nav header" "aside header" "footer footer"; } <nav>nav</nav> <header>header</header> <aside>aside</aside> <main>main</main> <footer>footer</footer> header nav { grid-area: nav; } header { grid-area: header; } aside { grid-area: aside; } footer { grid-area: footer; } footer
  46. placement nommé = grid-area

  47. FUSION DE COLONNES ET DE RANGÉES

  48. Salade Tomate Oignon .grid-container { display: grid; grid: ". .";

    } fusion avec « / » Salade Tomate Oignon .grid-container { display: grid; grid: ". ."; } .tomate { grid-row: auto / 3; }
  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; }
  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; }
  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; }
  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
  53. EXERCICE ! base positionnement

  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.
  55. QUIZ !

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

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

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

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

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

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

    } nav { grid-area: 2 / 1 / 4 / 2; }
  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
  68. MODIFIER L’ORDRE D’AFFICHAGE

  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
  70. APPLIQUER DES GOUTTIÈRES

  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
  72. gouttières comment fait-on depuis Grid Layout ? Salade Tomate Oignon

    Picon bière .grid-container { display: grid; grid: ". ."; gap: 20px; } (grid-)
  73. EXERCICE ! tri d’éléments

  74. ALIGNEMENT DES
 ÉLÉMENTS

  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
  76. justify-content alignement horizontal des grid cells align-content alignement vertical des

    grid cells
  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
  78. justify-items alignement horizontal des grid items align-items alignement vertical des

    grid items
  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
  80. justify-self alignement horizontal d’un grid item align-self alignement vertical d’un

    grid item
  81. justify-self .grid-container { display: grid; justify-items: start; } .oignon {

    justify-self: end; } salade tomate oignon picon bière
  82. .grid-container { display: grid; justify-content: center; align-content: center; } salade

    tomate oignon picon bière en plein dans le mille !
  83. EXERCICE ! alignements

  84. RÉPÉTER DES MOTIFS

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

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

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

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

    combo ! http://codepen.io/raphaelgoetter/pen/pgRQwv
  89. EXERCICE ! galerie d’images

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

  91. chiche !

  92. <div class="container"> <header>header</header> <nav>nav</nav> <h1 class="title">title</h1> <article>article 1</article> <article>article 2</article>

    <article>article 3</article> <footer>footer</footer> </div> HTML : header { grid-area: header; } nav { grid-area: nav; } .title { grid-area: title; } article { /* rien */ } footer { grid-area: footer; } placement :
  93. .container { display: grid; grid-template-columns: 1fr; grid-template-areas: "nav" "header" "title"

    "." "." "." "footer"; } CSS mobile first !
  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 :
  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 :
  96. SUPPORT
 DE GRID LAYOUT

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

    trucs chouettes)
  98. natif polyfill 10-11

  99. natif polyfill total 10-11

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

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

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

  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 »
  104. mon design s’adapte à tous les devices, je pratique le

    responsive web design yeah! beau gosse! GG!
  105. mon design s’adapte à tous les navigateurs, je pratique l’amélioration

    progressive aaah! ca ne s’affiche meme pas pareil sur IE ?!
  106. amélioration progressive https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_am%C3%A9lioration_progressive

  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
  108. le cas IE https://www.alsacreations.com/tuto/lire/1771-css-grid-layout-en-production.html it’s complicated…

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

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

  111. ET C’EST PAS FINI !

  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
  113. RESSOURCES

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

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

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

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

  118. 118 Firefox Grid inspector

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

  120. EXERCICES !

  121. merci ! raphaël goetter slides sur
 www.speakerdeck.com/goetter agence web organisme

    de formation www.alsacreations.fr forum communauté www.alsacreations.com