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

How CSS Grid Changes Everything

Jen Simmons
November 06, 2017

How CSS Grid Changes Everything

Presented at the W3C Developer meetup, San Francisco.

Jen Simmons

November 06, 2017
Tweet

More Decks by Jen Simmons

Other Decks in Technology

Transcript

  1. How CSS Grid
    Changes Everything
    (in 15 mins?)
    W3C Developer Meetup
    @jenSimmons

    View full-size slide

  2. Follow
    @jensimmons
    for slides

    View full-size slide

  3. Layout on the Web

    View full-size slide

  4. photo by Brad Frost, 2012, CC BY 2.0

    View full-size slide

  5. The Official Timeline of Web Page Layout
    The
    No-Layout
    Layout
    Table-based
    Layouts
    Hand-coded
    Float Layouts
    Framework
    Layouts Amazing
    Future!

    View full-size slide

  6. CSS Grid
    Flexbox
    Alignment
    Writing Modes
    Multicolumn
    Viewport Units
    Transforms
    Object Fit
    Clip-path
    Masking
    Shape-outside
    Initial-letter
    Flow
    Floats
    Block
    Inline
    Inline-block
    Display:table
    Margin
    Negative margins
    Padding
    everything else
    in CSS

    View full-size slide

  7. This new CSS
    changes everything
    in web layout.

    View full-size slide

  8. labs.jensimmons.com

    View full-size slide

  9. Grid makes it
    much easier to implement
    the same old layouts.

    View full-size slide

  10. Grid makes it possible
    to do layouts that were
    not possible before.

    View full-size slide

  11. Nature of
    CSS Grid

    View full-size slide

  12. explicit vs. implicit

    View full-size slide

  13. You define
    !e size and/or
    number of rows
    and/or
    columns
    Let !e browser
    define number or
    size of rows
    or columns

    View full-size slide

  14. Place each "em 

    into a specific 

    cell or area
    Let !e browser
    place each
    "em using
    auto-placement
    algor"hm

    View full-size slide

  15. Rows *and* Columns

    View full-size slide

  16. ROWS!!!!!!!!!!!

    View full-size slide

  17. Tracks don’t have to all
    be the same size.

    View full-size slide

  18. Content sized by
    the size of a track.

    View full-size slide

  19. Tracks sized by
    the size of content.

    View full-size slide

  20. portion of
    available 

    space —
    2 parts
    set by 

    content size
    fixed portion of
    available 

    space —
    1 part

    View full-size slide

  21. Grid Container

    View full-size slide
















  22. body {
    display: grid;
    }

    View full-size slide
















  23. body {
    display: grid;
    }
    article {
    display: grid;
    }

    View full-size slide
















  24. body {
    display: grid;
    }
    main {
    display: subgrid;
    }
    article {
    display: subgrid;
    }

    View full-size slide
















  25. body {
    display: grid;
    }
    article {
    display: grid;
    }

    View full-size slide

  26. Headline Here
    This is teaser text. It
    comes in different lengths. Headline Here
    This is teaser text. It
    comes in different lengths.
    Here we see more content
    filling the box up all the way.
    Headline
    This is teaser text.
    Headline That is
    Longer & Wraps
    This is teaser text. It
    comes in different lengths.
    Headline
    This Headline
    This is teaser text. It
    comes in different lengths.

    View full-size slide

  27. Headline Here
    This is teaser text. It
    comes in different lengths. Headline Here
    This is teaser text. It
    comes in different lengths.
    Here we see more content
    filling the box up all the way.
    Headline
    This is teaser text.
    Headline That is
    Longer & Wraps
    This is teaser text. It
    comes in different lengths.
    Headline
    This Headline
    This is teaser text. It
    comes in different lengths.

    View full-size slide

  28. Headline Here
    This is teaser text. It
    comes in different lengths. Headline Here
    This is teaser text. It
    comes in different lengths.
    Here we see more content
    filling the box up all the way.
    Headline
    This is teaser text.
    Headline That is
    Longer & Wraps
    This is teaser text. It
    comes in different lengths.
    Headline
    This Headline
    This is teaser text. It
    comes in different lengths.

    View full-size slide

  29. Headline Here
    This is teaser text. It
    comes in different lengths. Headline Here
    This is teaser text. It
    comes in different lengths.
    Here we see more content
    filling the box up all the way.
    Headline
    This is teaser text.
    Headline That is
    Longer & Wraps
    This is teaser text. It
    comes in different lengths.
    Headline
    This Headline
    This is teaser text. It
    comes in different lengths.

    View full-size slide

  30. Headline Here
    This is teaser text. It
    comes in different lengths. Headline Here
    This is teaser text. It
    comes in different lengths.
    Here we see more content
    filling the box up all the way.
    Headline
    This is teaser text.
    Headline That is
    Longer & Wraps
    This is teaser text. It
    comes in different lengths.
    Headline
    This Headline
    This is teaser text. It
    comes in different lengths.

    View full-size slide

  31. labs.jensimmons.com

    View full-size slide

  32. Container
    Item Item Item

    View full-size slide

  33. Grid Container

    View full-size slide

  34. Grid Line
    Grid Track
    Grid Track
    Grid Line
    Grid Line
    Grid Line
    Grid Line
    Grid Area
    Grid Cell

    View full-size slide

  35. Grid Line
    Grid Track
    Grid Line
    Grid Line
    Grid Line
    Grid Line
    Grid Gap
    Grid Gap
    Grid Gap
    Grid Track

    View full-size slide

  36. labs.jensimmons.com/2017/01-003.html

    View full-size slide

  37. ul {
    display: grid;
    grid-template-columns: repeat(4, 100px);
    grid-gap: 4px;
    }
    li {
    // nothing
    }

    View full-size slide

  38. ul {
    display: grid;
    grid-template-columns:
    repeat(4, 100px);
    grid-gap: 4px;
    }
    li {
    // nothing
    }

    View full-size slide

  39. ul {
    display: grid;
    grid-template-columns: repeat(4, 100px);
    grid-gap: 4px;
    }
    /* or */
    ul {
    display: grid;
    grid-template-columns: 100px 100px 100px 100px;
    grid-gap: 4px;
    }

    View full-size slide

  40. ul {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 0.25em;
    }
    /* or */
    ul {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 0.25em;
    }

    View full-size slide

  41. ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    grid-gap: 0.25rem;
    }

    View full-size slide

  42. nightly.mozilla.org

    View full-size slide

  43. ul {
    display: grid;
    grid-template-columns:
    repeat(4, 1fr);
    }

    View full-size slide

  44. li:nth-child(1) {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    }

    View full-size slide

  45. li:nth-child(1) {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    }
    li:nth-child(2) {
    grid-column: 4 / 5;
    grid-row: 2 / 3;
    }
    li:nth-child(3) {
    grid-column: 3 / 4;
    grid-row: 3 / 4;
    }
    li:nth-child(4) {…}
    li:nth-child(5) {…}

    View full-size slide

  46. ‘fr’ unit

    View full-size slide

  47. .grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    }
    some other syntax options (each with different results)
    grid-template-columns: 1fr 5fr 2.5fr;
    grid-template-columns: 8em 1fr 300px;
    grid-template-columns: 1fr 1fr 2fr 3fr 5fr 8fr 13fr 21fr 34fr;
    grid-template-columns: repeat(7, 1fr);
    grid-template-columns: repeat(3, 200px 1fr 25%);
    grid-template-columns: repeat(auto-fill, 10rem);
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-template-columns: 4rem 2fr repeat(5, 1fr) 300px;

    View full-size slide

  48. px
    em
    %
    pixels
    (or rem)
    percents
    60px
    10em
    20%

    View full-size slide

  49. min-content
    max-content
    fr
    minmax()

    View full-size slide

  50. fr unit = “fraction”

    View full-size slide

  51. 100%
    33% 33% 33%

    View full-size slide

  52. 100%
    33.33333% 33.33333% 33.33333%

    View full-size slide

  53. 100%
    33.33333% 33.33333% 33.33333%

    View full-size slide

  54. 100%
    33% 33% 33%
    2% 2%

    View full-size slide

  55. 100%
    32% 32% 32%
    2% 2%
    100% – 4% = 96% = 32%
    3 3

    View full-size slide

  56. 100%
    31.333% 31.333% 31.333%
    3% 3%
    100% – 6% = 94% = 31.333%
    3 3

    View full-size slide

  57. 100%
    31.666% 31.666% 31.666%
    2.5% 2.5%
    100% – 5% = 95% = 31.666666666666666%
    3 3

    View full-size slide

  58. .box { width: calc(100-(2*2em)/3)%;}
    100%
    x% x% x%
    2em 2em
    @media (min-width: 600px) { .box { width: calc(100-(2*2em)/3)%;}}
    @media (min-width: 800px) { .box { width: calc(100-(3*2em)/4)%;}}
    @media (min-width: 400px) { .box { width: calc(100-(1*2em)/2)%;}}

    View full-size slide

  59. 100%
    1fr 1fr 1fr
    2em 2em

    View full-size slide

  60. 1fr 1fr 1fr
    2em 2em
    1fr + 1fr + 1fr = 3fr total
    therefore, 1fr = 1/3 of the space

    View full-size slide

  61. 1fr 1fr 1fr
    2em 2em
    1fr + 1fr + 1fr + 1fr = 4fr total
    therefore, now 1fr = 1/4 of the space
    1fr
    2em

    View full-size slide

  62. 100px 1fr 1fr
    1fr 1fr
    100px

    View full-size slide

  63. 2fr 1fr
    50px 1fr min-content

    View full-size slide

  64. 6fr 2.4fr
    1fr 2.4fr 2fr

    View full-size slide

  65. What about old browsers?

    View full-size slide

  66. You must support
    browsers that 

    do not understand 

    CSS Grid.

    View full-size slide

  67. @supports (foo: value) {
    // some CSS code here
    }

    View full-size slide

  68. // code for non-Grid browsers
    @supports (display: grid) {
    // undo some of the above
    // then do your Grid layout
    }

    View full-size slide

  69. hacks.mozilla.org/2016/08/using-feature-queries-in-css

    View full-size slide

  70. You have two choices for 

    Internet Explorer (& old Edge):
    1) Leverage the 2012 Grid
    implementation.
    2) Pretend IE has no Grid.

    View full-size slide

  71. You have two choices for 

    Internet Explorer (& old Edge):
    1) Use old -ms-* syntax.
    2) Or don’t.

    View full-size slide

  72. display: grid;
    grid-template-columns: repeat(4, 100px);
    display: -ms-grid;
    -ms-grid-columns: (100px)[4];

    View full-size slide

  73. Autoprefixer

    View full-size slide

  74. rachelandrew.co.uk/archives/2016/11/26/should-i-try-
    to-use-the-ie-implementation-of-css-grid-layout

    View full-size slide

  75. jensimmons.com/post/feb-27-2017/learn-css-grid

    View full-size slide

  76. developer.mozilla.org/docs/Web/CSS/CSS_Grid_Layout

    View full-size slide

  77. Modern Layouts: 

    Getting Out of Our Ruts
    Revolutionize Your Page: 

    Real Art Direction on the Web
    2015
    2016
    available on jensimmons.com

    View full-size slide

  78. jensimmons.com
    @jensimmons
    layout.land
    labs.jensimmons.com
    Thanks!

    View full-size slide