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

Atelier CSS Grid Layout

Raphael Goetter
October 07, 2018

Atelier CSS Grid Layout

Raphael Goetter

October 07, 2018
Tweet

More Decks by Raphael Goetter

Other Decks in Design

Transcript

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

    / jour ✓ 50000 membres sur le forum ALSACREATIONS.COM communauté d’apprentissage
  2. 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
  3. 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>
  4. 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
  5. 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
  6. 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
  7. 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;
  8. 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>
  9. 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;
  10. 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
  11. 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; }
  12. 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
  13. Salade Tomate Oignon .grid-container { display: grid; grid: ". .";

    } fusion avec « / » Salade Tomate Oignon .grid-container { display: grid; grid: ". ."; } .tomate { grid-row: auto / 3; }
  14. 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; }
  15. 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; }
  16. .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; }
  17. .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
  18. (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.
  19. 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;
  20. 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;
  21. 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
  22. 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
  23. 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;
  24. 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
  25. 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
  26. 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
  27. gouttières comment fait-on depuis Grid Layout ? Salade Tomate Oignon

    Picon bière .grid-container { display: grid; grid: ". ."; gap: 20px; } (grid-)
  28. 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
  29. 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
  30. 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
  31. justify-self .grid-container { display: grid; justify-items: start; } .oignon {

    justify-self: end; } salade tomate oignon picon bière
  32. <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 :
  33. @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 :
  34. @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 :
  35. 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 »
  36. mon design s’adapte à tous les devices, je pratique le

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

    progressive aaah! ca ne s’affiche meme pas pareil sur IE ?!
  38. @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
  39. 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
  40. merci ! raphaël goetter slides sur
 www.speakerdeck.com/goetter agence web organisme

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