Prototyping Layout with CSS Grid - Refresh DC

Presented at Refresh DC, September 2017

Transcript

1. Prototyping Layout with CSS Grid Refresh DC • September 2017
2. Hello! Jess Eldredge
 Senior web developer, Slate @jessabean
3. Grid system:
 the foundation of design
9. Design challenge
13. Our requirements • Responsive: grid context changes across breakpoints • Use CSS Grid! • Fallback for browsers that don’t support grid
14. What is CSS Grid?
15. Floats: float containers left/right, no equal heights, remember to clear!
16. Flexbox: 1 dimension, anything in a straight line, distribute space evenly
17. CSS Grid: 2 dimensions, children can be positioned anywhere
18. Planning layout
22. Setting up the grid
23. Markup for grid 1 <div class="wrapper"> <section class="grid grid-1"> <h2 class="heading"></h2> <div class="quote quote-1"></div> <div class="quote quote-2"></div> <div class="quote quote-3"></div> <div class="quote quote-4"></div> <div class="see-more"></div> </section> </div>
24. Centering our content wrapper .wrapper { max-width: 20em; margin-left: auto; margin-right: auto; } @media screen and min-width(48em) { .wrapper { max-width: 38em; } } @media screen and min-width(64em) { .wrapper { max-width: 55em; } }
25. Setting up grid: display .grid { display: grid; }
26. Setting up grid: columns .grid { display: grid; grid-template-columns: 40px 40px 40px; }
27. Setting up grid: columns .grid { display: grid; grid-template-columns: 40px 40px 40px; } 1fr 1fr 1fr;
28. Setting up grid: columns .grid { display: grid; grid-template-columns: 40px 40px 40px; } 1fr 1fr 1fr; 1fr 2fr 1fr;
29. Setting up grid: columns .grid { display: grid; grid-template-columns: 40px 40px 40px; } 1fr 1fr 1fr; 1fr 2fr 1fr; 100px 25% 1fr;
30. Setting up grid: columns .grid { display: grid; grid-template-columns: repeat(6, 1fr); }
31. Setting up grid: rows .grid { display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(2, 1fr); }
32. Setting up grid: rows .grid { display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(2, 1fr); } // Alternative syntax: // grid-template-rows: 75px 125px; // grid-template-rows: 100px 1fr;
33. Setting up grid: gutters .grid { display: grid; grid-template-columns: repeat(6, 1fr); grid-gap: 0.75em; }
34. Setting up grid: gutters .grid { display: grid; grid-template-columns: repeat(6, 1fr); grid-gap: 0.75em; } // Shorthand is equivalent to: // grid-column-gap: 0.75em; // grid-row-gap: 0.75em;
35. Setting up grid: gutters .grid { display: grid; grid-template-columns: repeat(6, 1fr); grid-gap: 0.75em; } // Shorthand is equivalent to: // grid-column-gap: 0.75em; // grid-row-gap: 0.75em;
36. @media screen and (min-width: 48em) { .grid { grid-template-columns: repeat(12, 1fr); } } @media screen and (min-width: 64em) { .grid { grid-template-columns: repeat(15, 1fr); grid-gap: 1.25em; } } Responsive grid settings
37. DEMO: Basic grid
38. DEMO: Basic grid
39. DEMO: Basic grid
40. Placing items on the grid
42. Placing grid items .grid > * { grid-column-start: 1; grid-column-end: 7; } // Alternative shorthand: // grid-column: 1 / 7;
43. Placing grid items .grid > * { grid-column-start: 1; grid-column-end: 7; } // Alternative shorthand: // grid-column: 1 / 7;
44. Placing grid items .grid > * { grid-column-start: 1; grid-column-end: 7; } // Alternative shorthand: // grid-column: 1 / 7;
45. Placing grid items .grid > * { grid-column-start: 1; grid-column-end: 7; } // Alternative shorthand: // grid-column: 1 / 7;
46. Shorthand: span syntax .grid > * { grid-column: 1 / span 6;
 }
47. Shorthand: span syntax .grid > * { grid-column: 1 / span 6;
 } // Shorthand is equivalent to: // grid-column-start: 1; // grid-column-end: span 6;
48. DEMO: Grid 1 small screen
49. Explicit vs implicit grid .grid { display: grid; grid-template-columns: repeat(6, 1fr); grid-gap: 0.75em; } .grid > * { grid-column: 1 / span 6; }
50. Explicit vs implicit grid .grid { display: grid; grid-template-columns: repeat(6, 1fr); grid-gap: 0.75em; } .grid > * { grid-column: 1 / span 6; }
51. Explicit vs implicit grid .grid { display: grid; grid-template-columns: repeat(6, 1fr); grid-gap: 0.75em; } .grid > * { grid-column: 1 / span 6; }
52. Explicit vs implicit grid .grid { display: grid; grid-template-columns: repeat(6, 1fr); grid-gap: 0.75em; } .grid > * { grid-column: 1 / span 6; }
54. Placing first items on the grid .heading { grid-column: 1 / span 9; } .see-more { grid-column: 10 / span 3; } @media screen and (min-width: 48em)
55. Placing first items on the grid .heading { grid-column: 1 / span 9; } .see-more { grid-column: 10 / span 3; } @media screen and (min-width: 48em)
56. Explicitly place link in the first row .heading { grid-column: 1 / span 9; grid-row: 1; } .see-more { grid-column: 10 / span 3; grid-row: 1; } @media screen and (min-width: 48em)
57. Placing quotes on the grid @media screen and (min-width: 48em) .quote-1 { grid-column: 1 / span 12; } .quote-2 { grid-column: 1 / span 4; } .quote-3 { grid-column: 5 / span 4; } .quote-4 { grid-column: 9 / span 4; }
58. Placing quotes on the grid @media screen and (min-width: 48em) .quote-1 { grid-column: 1 / span 12; } .quote-2 { grid-column: 1 / span 4; } .quote-3 { grid-column: 5 / span 4; } .quote-4 { grid-column: 9 / span 4; }
59. DEMO: Grid 1 small screen
61. Placing heading and link again .heading { grid-column: 1 / span 12; } .see-more { grid-column: 13 / span 3; } @media screen and (min-width: 64em)
62. Placing quotes .quote-1 { grid-column: 1 / span 12; } .quote-2 { grid-column: 13 / span 3; } .quote-3 { grid-column: 13 / span 3; } .quote-4 { grid-column: 13 / span 3; } @media screen and (min-width: 64em)
63. Spanning rows .quote-1 { grid-column: 1 / span 12; grid-row: 2 / span 3; } @media screen and (min-width: 64em)
64. DEMO: Grid 1 small screen
65. Adding flexbox media object <div class="quote quote-1"> <div class="media media-1"> <div class="media-image"></div> <div class="media-content"></div> </div> </div> .media { display: flex; flex-direction: column; } .media-content { flex: 1 1 auto; } html css
66. DEMO: Grid 1 items with media
70. Markup for grid 2 <section class="grid grid-2"> <h2 class="heading"></h2> <div class="quote quote-5"> <div class="media media-2"> <div class="media-image"></div> <div class="media-content"></div> </div> </div> <div class="quote quote-6"></div> <div class="quote quote-7"></div> <div class="see-more"></div> </section>
71. Medium screens: placing quotes .quote-5 { grid-column: 1 / span 6; } .quote-6 { grid-column: 7 / span 3; } .quote-7 { grid-column: 10 / span 3; } @media screen and (min-width: 48em)
73. Large screens: placing quotes @media screen and (min-width: 64em) .quote-5 { grid-column: 9 / span 7; } .quote-6 { grid-column: 1 / span 4; } .quote-7 { grid-column: 5 / span 4; }
77. Revisiting the implicit grid
78. CSS Grid auto placement • Explicit grid
 Rules dictated by grid-template-*, grid-column, grid-gap, etc. • Implicit grid
 CSS Grid creates new tracks for the items that fall out of explicitly defined bounds • grid-auto-flow
 The property that controls the auto-placement algorithm for the implicit grid
79. https://codepen.io/jessabean/pen/OxLwdB .demo-grid { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); grid-auto-flow: row; } .item1 { grid-column: 2 / span 1; }
80. https://codepen.io/jessabean/pen/yzBqry .demo-grid { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); grid-auto-flow: column; } .item1 { grid-column: 2 / span 1; }
81. https://codepen.io/jessabean/pen/yzBqry .item3 { grid-row: 3; } .demo-grid { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); grid-auto-flow: column; } .item1 { grid-column: 2 / span 1; }
82. https://codepen.io/jessabean/pen/yzBqry .item3 { grid-row: 3; } .demo-grid { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); grid-auto-flow: column; } .item1 { grid-column: 2 / span 1; }
83. https://codepen.io/jessabean/pen/jGNpRg .demo-grid { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); grid-auto-flow: row dense; } .item1 { grid-column: 2 / span 1; }
84. https://codepen.io/jessabean/pen/YrzKLX .demo-grid { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); grid-auto-flow: column dense; } .item1 { grid-column: 2 / span 1; } .item3 { grid-row: 3; }
85. Update auto-flow mode for Dave Chappelle’s grid .grid-2 { grid-auto-flow: row dense; }
86. DEMO: Final layout with both grids
87. We did it!!! Did we?
89. Nested grids aren’t aware of parent tracks .quote-5 { display: grid; }
90. Nested grids aren’t aware of parent tracks .quote-5 { display: grid; } grid-template-columns:?????;
91. Nested grid inception .quote-5 { display: grid; grid-template-columns: repeat(7, 1fr); } @media screen and (min-width: 48em) { .quote-5 { … } } @media screen and (min-width: 64em) { .quote-5 { … } }
92. Subgrid doesn’t exist in the Level 1 spec yet
93. Re-inventing the grid
94. We need to calculate “1fr” explicitly .grid { grid-template-columns: repeat(6, 1fr); grid-gap: 0.75em; } @media screen and (min-width: 48em) { .grid { grid-template-columns: repeat(12, 1fr); } } @media screen and (min-width: 64em) { .grid{ grid-template-columns: repeat(15, 1fr); grid-gap: 1.25em; } }
95. Step 1: The 3 magic ingredients
96. Establish settings for each breakpoint in a Sass map $grid-config: ( sm: ( ), md: ( ), lg: ( ) );
97. Establish settings for each breakpoint in a Sass map $grid-config: ( sm: ( ), md: ( ), lg: ( ) ); container: 20em, column-count: 6, gutter: 0.75em
98. Establish settings for each breakpoint in a Sass map $grid-config: ( sm: ( ), md: ( ), lg: ( ) ); container: 20em, column-count: 6, gutter: 0.75em container: 38em, column-count: 12, gutter: 0.75em container: 55em, column-count: 15, gutter: 1.25em
99. Step 2: Calculate “1fr”
100. A function to calculate the width of 1 column @function calc-column-width($container, $column-count, $gutter) { }
101. A function to calculate the width of 1 column @function calc-column-width($container, $column-count, $gutter) { } $total-gutters = ($column-count - 1) * $gutter;
102. A function to calculate the width of 1 column @function calc-column-width($container, $column-count, $gutter) { } $total-gutters = ($column-count - 1) * $gutter; $column-width = ($container - $total-gutters) / $column-count;
103. A function to calculate the width of 1 column @function calc-column-width($container, $column-count, $gutter) { } $total-gutters = ($column-count - 1) * $gutter; $column-width = ($container - $total-gutters) / $column-count; @return $column-width;
104. Step 3: Calculate column span
105. A function to calculate the column span // Calculate a fixed width that spans columns defined by CSS Grid @function span-columns($breakpoint, $column-span) { }
106. Assigning breakpoint settings object to a variable @function span-columns($breakpoint, $column-span) { } // Get the $grid-config settings for the specified breakpoint $settings: map-get($grid-config, $breakpoint); $settings: ( container-width: 20em, column-count: 6, gutter-size: 0.75em )
107. Fetching container width, column count, and gutter width @function span-columns($breakpoint, $column-span) { } … // Get the individual properties nested in the breakpoint $container: map-get($settings, container); $column-count: map-get($settings, column-count); $gutter: map-get($settings, gutter); $container: 20em; $totalcolumns: 6; $gutter: 0.75em;
108. Using our column width function @function span-columns($breakpoint, $column-span) { } … … // Calculate individual column size based on config settings $column-width: calc-column-width($container, $column-count, $gutter);
109. @function span-columns($breakpoint, $column-span) { } Calculating total width of spanned columns @return ($column-width * $column-span) + ($gutter * ($column-span - 1)); … … …
110. @function span-columns($breakpoint, $column-span) { } Calculating total width of spanned columns @return ($column-width * $column-span) + ($gutter * ($column-span - 1)); … … … width of columns
111. @function span-columns($breakpoint, $column-span) { } Calculating total width of spanned columns @return ($column-width * $column-span) + ($gutter * ($column-span - 1)); … … … width of columns width of gutters +
112. Step 4: Use span-columns function
113. Using our function to span our grid columns .media-2 { flex-direction: row; } .media-2 .media-image { flex-basis: span-columns(lg, 4); }
114. DEMO: Final FINAL layout with 2 grids
115. Progressive enhancement
117. Autoprefixer for CSS Grid: not recommended autoprefixer( { grid: false } ); IE limitations No auto-placement of grid items. No grid-gap support. No shorthand support for column start / end. No grid template areas.
118. Using feature queries to target CSS Grid at modern browsers @supports (display: grid) { // css grid styles go here }
119. Using feature queries to target CSS Grid at modern browsers @supports (display: grid) { // css grid styles go here } .grid { display: flex; }
120. Additional styles for the flexbox fallback .grid { display: flex; flex-wrap: wrap; flex-direction: column; margin-top: -0.375em; margin-left: -0.375em; margin-right: -0.375em; } .grid > * { flex: 1 1 auto; margin: 0.375em; }
121. Using our span-columns function to set width/flex-basis .grid { flex-direction: row; } .quote-1 { width: 100%; } .quote-2, .quote-3, .quote-4 { width: span-columns(md, 4); } @media screen and (min-width: 48em)
122. Setting widths at the largest breakpoint .quote-1 { width: span-columns(lg, 12); } .quote-2, .quote-3, .quote-4 { width: span-columns(lg, 3); } @media screen and (min-width: 64em)
123. Flexbox cannot handle 2-dimensional layout
124. Revisiting the flexbox design: a different experience for IE
125. There is a lot more to CSS Grid
126. • Naming column lines • grid-auto-rows/grid-auto-columns • grid-template-areas • auto-fill and auto-fit • minmax More CSS Grid features
127. • Source order and semantics are still important • We should use grid placement for visual display, but be mindful of document order for speech and keyboard navigation • Tab order will follow document order, not visual order CSS Grid and accessibility
128. You can use CSS Grid TODAY
131. https://codepen.io/jessabean/pen/dzgRZW
132. http://labs.jensimmons.com/2017/01-005.html
134. https://gridsetapp.com/specs/fonmon/?gridset=show
135. The definition of “grid system” will change
136. https://www.rachelandrew.co.uk/archives/2017/07/01/you-do-not-need-a-css-grid-based-grid-system/
137. – Miriam Suzanne http://oddbird.net/2017/06/28/susy3/ “If you have the browser-support matrix to start using the CSS Grid module directly, you should do it, and forget about Susy.”
152. Resources • Rachel Andrew: https://gridbyexample.com/learn/ • Jen Simmons: http://jensimmons.com/post/feb-27-2017/learn-css-grid • MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout • Igalia: https://blogs.igalia.com/mrego/2015/02/25/grid-auto-placement-is-ready/
153. Thank you! Links to demo code https://glitch.com/~grid-prototype-refresh-dc
 
 https://github.com/jessabean/grid-prototype-refresh-dc Slides https://speakerdeck.com/jessabean/prototyping-layout-with-css-grid-refreshdc
 @jessabean | jess@eldredge.io