Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

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. 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
  2. <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
  3. 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; }
  4. <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
  5. 1

  6. <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
  7. .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)
  8. 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>
  9. 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>
  10. 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
  11. 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
  12. 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;
  13. 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;
  14. 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
  15. 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
  16. 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;
  17. 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;
  18. 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
  19. 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
  20. 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;
  21. 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
  22. 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
  23. aligner la grille .grid-container { display: grid; grid-template-columns: 15% 15%

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

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

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

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

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

    15%; justify-content: space-evenly; } <div class=“grid-container”> </div>
  29. 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
  30. 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)
  31. 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
  32. 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
  33. 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
  34. 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; }
  35. 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; }
  36. 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;
  37. .grid { display: grid; --grid-number: 1; --grid-gutter: 0; } automatisation

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

    grid-template-columns: repeat(var(--grid-number), 1fr); } automatisation base :
  39. .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; }
  40. 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