$30 off During Our Annual Pro Sale. View Details »

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 Slide

  2. Follow
    @jensimmons
    for slides

    View Slide

  3. Layout on the Web

    View Slide

  4. View Slide

  5. View Slide

  6. View Slide

  7. View Slide

  8. View Slide

  9. View Slide

  10. View Slide

  11. View Slide

  12. View Slide

  13. View Slide

  14. View Slide

  15. View Slide

  16. View Slide

  17. View Slide

  18. View Slide

  19. View Slide

  20. View Slide

  21. View Slide

  22. View Slide

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

    View Slide

  24. View Slide

  25. View Slide

  26. View Slide

  27. View Slide

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

    View Slide

  29. 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 Slide

  30. This new CSS
    changes everything
    in web layout.

    View Slide

  31. labs.jensimmons.com

    View Slide

  32. View Slide

  33. View Slide

  34. View Slide

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

    View Slide

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

    View Slide

  37. Nature of
    CSS Grid

    View Slide

  38. explicit vs. implicit

    View Slide

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

    View Slide

  40. Place each "em 

    into a specific 

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

    View Slide

  41. Rows *and* Columns

    View Slide

  42. ROWS!!!!!!!!!!!

    View Slide

  43. View Slide

  44. View Slide

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

    View Slide

  46. View Slide

  47. View Slide

  48. Content sized by
    the size of a track.

    View Slide

  49. Tracks sized by
    the size of content.

    View Slide

  50. portion of
    available 

    space —
    2 parts
    set by 

    content size
    fixed portion of
    available 

    space —
    1 part

    View Slide

  51. Grid Code

    View Slide

  52. View Slide

  53. View Slide

  54. Grid Container

    View Slide

  55. Grid Items

    View Slide
















  56. body {
    display: grid;
    }

    View Slide
















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

    View Slide
















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

    View Slide
















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

    View Slide

  60. 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 Slide

  61. 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 Slide

  62. 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 Slide

  63. 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 Slide

  64. 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 Slide

  65. labs.jensimmons.com

    View Slide

  66. Container
    Item Item Item

    View Slide

  67. Terminology

    View Slide

  68. Grid Container

    View Slide

  69. Grid Items

    View Slide

  70. Grid Line
    Grid Track
    Grid Track
    Grid Line
    Grid Line
    Grid Line
    Grid Line
    Grid Area
    Grid Cell

    View Slide

  71. Grid Line
    Grid Track
    Grid Line
    Grid Line
    Grid Line
    Grid Line
    Grid Gap
    Grid Gap
    Grid Gap
    Grid Track

    View Slide

  72. 4 Examples

    View Slide

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

    View Slide

  74. View Slide










  75. View Slide

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

    View Slide

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

    View Slide

  78. 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 Slide

  79. View Slide

  80. 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 Slide

  81. View Slide

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

    View Slide

  83. View Slide

  84. View Slide

  85. nightly.mozilla.org

    View Slide

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

    View Slide

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

    View Slide

  88. 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 Slide

  89. ‘fr’ unit

    View Slide

  90. .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 Slide

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

    View Slide

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

    View Slide

  93. fr unit = “fraction”

    View Slide

  94. View Slide

  95. 100%
    33% 33% 33%

    View Slide

  96. 100%
    33.33333% 33.33333% 33.33333%

    View Slide

  97. 100%
    33.33333% 33.33333% 33.33333%

    View Slide

  98. 100%
    33% 33% 33%
    2% 2%

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  102. .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 Slide

  103. 100%
    1fr 1fr 1fr
    2em 2em

    View Slide

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

    View Slide

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

    View Slide

  106. 100px 1fr 1fr
    1fr 1fr
    100px

    View Slide

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

    View Slide

  108. 6fr 2.4fr
    1fr 2.4fr 2fr

    View Slide

  109. What about old browsers?

    View Slide

  110. View Slide

  111. 6

    View Slide

  112. View Slide

  113. You must support
    browsers that 

    do not understand 

    CSS Grid.

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  117. View Slide

  118. 6

    View Slide

  119. You have two choices for 

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

    View Slide

  120. You have two choices for 

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

    View Slide

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

    View Slide

  122. Autoprefixer

    View Slide

  123. View Slide

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

    View Slide

  125. View Slide

  126. View Slide

  127. View Slide

  128. View Slide

  129. View Slide

  130. For more…

    View Slide

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

    View Slide

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

    View Slide

  133. Modern Layouts: 

    Getting Out of Our Ruts
    Revolutionize Your Page: 

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

    View Slide

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

    View Slide