How CSS Grid Changes Everything

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