Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Graduating to Grid

1,091 views

Published on

Grid layout has now landed in all of the mainstream desktop browsers. It's exciting but how do we start to move to using grid layout, and why should we?

Published in: Technology
  • Be the first to comment

Graduating to Grid

  1. 1. Graduating to Grid An Event Apart San Francisco 2017
 @rachelandrew
  2. 2. @rachelandrew And there was great rejoicing.
  3. 3. @rachelandrew https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/6514853-update-css-grid
  4. 4. @rachelandrew https://caniuse.com/#search=grid
  5. 5. @rachelandrew What’s it like being in the middle of a launch of a big new CSS feature?
  6. 6. @rachelandrew It involved a lot of email.
  7. 7. @rachelandrew Grid is: • Exciting - a real game changer • Confusing - it doesn’t seem to do what I thought it would • Scary - there are so many new properties to learn!
  8. 8. @rachelandrew –Me, in a survey question “Q. How do you feel when you see a new 
 CSS feature announced?”
  9. 9. @rachelandrew –Survey response “Excited but also worried about falling behind.”
  10. 10. @rachelandrew –Survey response “Excited, until I share it with colleagues and 
 they pick it apart”
  11. 11. @rachelandrew –Survey response “Oh no, a new way to have inconsistencies between 
 web browsers.”
  12. 12. @rachelandrew –Survey response “Tired.”
  13. 13. @rachelandrew I can’t tell you what to do.
  14. 14. @rachelandrew I can help you develop the skills to 
 make those decisions yourself.
  15. 15. @rachelandrew I want you to be the amazing CSS layout person on your team.
  16. 16. @rachelandrew You need to understand CSS.
  17. 17. @rachelandrew Understanding CSS is not about learning every property and value by heart.
 
 (my main skill is “can use a search engine”)
  18. 18. @rachelandrew Core ideas that help CSS layout make sense.
  19. 19. @rachelandrew Cascading Style Sheets
  20. 20. @rachelandrew Inheritance - which properties will inherit values from their parent.
  21. 21. @rachelandrew Specificity - which rule wins when two things could apply to the same element.
  22. 22. @rachelandrew https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance
  23. 23. @rachelandrew Block and inline dimensions
  24. 24. @rachelandrew Inline dimension or axis Horizontal Writing Mode Block dimension
 or axis
  25. 25. @rachelandrew Block dimension or axis Vertical Writing Mode Inline dimension
 or axis
  26. 26. @rachelandrew Inline / Row axis Block / Column axis Grid Layout in Horizontal Writing Mode
  27. 27. @rachelandrew flex-direction: row Main axis Cross axis flex-direction: column Cross axis Main axis Flex Layout in Horizontal Writing Mode
  28. 28. @rachelandrew Sizing Matters
  29. 29. @rachelandrew https://codepen.io/rachelandrew/pen/ZXMwdB
  30. 30. @rachelandrew https://codepen.io/rachelandrew/pen/ZXMwdB row wrapper (6.20%*4) + (2.093333%*3)6.20%
  31. 31. @rachelandrew .col { margin-bottom: 1em; margin-left: 2.093333%; width: 6.20%; float: left; } .row::after { content: ""; display: block; clear: both; } .col.span2 { width: calc((6.20%*2) + 2.093333%); } .col.span3 { width: calc((6.20%*3) + (2.093333%*2)); } .col.span4 { width: calc((6.20%*4) + (2.093333%*3)); } https://codepen.io/rachelandrew/pen/ZXMwdB Fun math! Clearing! Percentages!
  32. 32. @rachelandrew Percentages • Ugly • Easy to understand • If they total more than 100% bad things happen. • Can be converted from an ideal pixel size using a straightforward calculation.
  33. 33. @rachelandrew https://codepen.io/rachelandrew/pen/eGPPaZ
  34. 34. @rachelandrew Row wrapper as flex container (6.20%*4) + (2.093333%*3)6.20% https://codepen.io/rachelandrew/pen/eGPPaZ
  35. 35. @rachelandrew .wrapper .row { display: flex; flex-wrap: wrap; } .col { padding: 10px; margin-bottom: 1em; margin-left: 2.093333%; width: 6.20%; flex: 0 0 auto; } .col.span2 { width: calc((6.20%*2) + 2.093333%); } .col.span3 { width: calc((6.20%*3) + (2.093333%*2)); } .col.span4 { width: calc((6.20%*4) + (2.093333%*3)); } https://codepen.io/rachelandrew/pen/eGPPaZ Fun math! Percentages! Inflexible flex items!
  36. 36. @rachelandrew Past layout methods create the appearance of a grid, by lining things up.
  37. 37. @rachelandrew CSS Intrinsic and Extrinsic Sizing https://drafts.csswg.org/css-sizing-3/
  38. 38. @rachelandrew /* html */
 <div class="box"> I am a string of text. </div> /* css */
 .box { padding: 10px; border: 5px dotted rgba(255,255,255,.7); margin-bottom: 2em; } https://codepen.io/rachelandrew/pen/rGqQNM/
  39. 39. @rachelandrew https://codepen.io/rachelandrew/pen/rGqQNM/ available width
  40. 40. @rachelandrew .box {
 width: 500px;
 } https://codepen.io/rachelandrew/pen/rGqQNM/
  41. 41. @rachelandrew https://codepen.io/rachelandrew/pen/rGqQNM/ 500px available width
  42. 42. @rachelandrew https://codepen.io/rachelandrew/pen/rGqQNM/ max content min content
  43. 43. @rachelandrew .box {
 width: min-content;
 } https://codepen.io/rachelandrew/pen/rGqQNM/
  44. 44. @rachelandrew https://codepen.io/rachelandrew/pen/rGqQNM/ available width min-content
  45. 45. @rachelandrew .box { width: max-content; } https://codepen.io/rachelandrew/pen/rGqQNM/
  46. 46. @rachelandrew https://codepen.io/rachelandrew/pen/rGqQNM/ available width max-content
  47. 47. @rachelandrew <div class="fixed-width"> <div class="box"> I am a longer string of text and max-content will cause me to overflow. </div> </div> https://codepen.io/rachelandrew/pen/rGqQNM/
  48. 48. @rachelandrew .fixed-width { width: 20em; border: 5px solid rgb(255,255,255); margin-bottom: 2em; } .box { width: max-content; } https://codepen.io/rachelandrew/pen/rGqQNM/
  49. 49. @rachelandrew https://codepen.io/rachelandrew/pen/rGqQNM/ 20em max-content
  50. 50. @rachelandrew <div class="box"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> <div>Item 4</div> </div> https://codepen.io/rachelandrew/pen/KXGbQo/
  51. 51. @rachelandrew https://codepen.io/rachelandrew/pen/KXGbQo/ Items start by trying to display at max-content size. Space is reduced according to the flex- basis. In this case the size of the content.
  52. 52. @rachelandrew https://codepen.io/rachelandrew/pen/KXGbQo/ Items can grow and shrink so stretch to fill the container. With no extra space, items shrink as before. flex: 1 1 auto;
  53. 53. @rachelandrew https://codepen.io/rachelandrew/pen/KXGbQo/ Items can grow and shrink so stretch to fill the container. With a flex-basis of 0 space is distributed from 0, making equal columns. flex: 1 1 0;
  54. 54. @rachelandrew https://codepen.io/rachelandrew/pen/wrYONK Flex items at min-content size Grid items at max-content size
  55. 55. @rachelandrew Flexbox is starting from max-content 
 and taking space away. Grid starting at 
 min-content and adding space.
  56. 56. @rachelandrew .grid { display: grid; grid-template-columns: repeat(4, min-content); } https://codepen.io/rachelandrew/pen/bomZVP/
  57. 57. @rachelandrew https://codepen.io/rachelandrew/pen/bomZVP/ min-content
  58. 58. @rachelandrew .grid { display: grid; grid-template-columns: repeat(4, max-content); } https://codepen.io/rachelandrew/pen/bomZVP/
  59. 59. @rachelandrew https://codepen.io/rachelandrew/pen/bomZVP/ max-content
  60. 60. @rachelandrew .grid { display: grid; grid-template-columns: repeat(4, fit-content(15ch)); } https://codepen.io/rachelandrew/pen/Oxqgqo
  61. 61. @rachelandrew https://codepen.io/rachelandrew/pen/Oxqgqo fit-content(15ch)
  62. 62. @rachelandrew https://codepen.io/rachelandrew/pen/ZXPJbQ
  63. 63. @rachelandrew https://codepen.io/rachelandrew/pen/ZXPJbQ grid-template-columns: repeat(12, minmax(0,1fr)); grid-column: auto / span 4;
  64. 64. @rachelandrew .wrapper { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); grid-gap: 20px; } .col.span2 { grid-column: auto / span 2; } .col.span3 { grid-column: auto / span 3; } .col.span4 { grid-column: auto / span 4; } https://codepen.io/rachelandrew/pen/ZXPJbQ
  65. 65. @rachelandrew .wrapper { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); grid-column-gap: 2.093333%; grid-row-gap: 20px; } .col.span2 { grid-column: auto / span 2; } .col.span3 { grid-column: auto / span 3; } .col.span4 { grid-column: auto / span 4; } https://codepen.io/rachelandrew/pen/ZXPJbQ
  66. 66. @rachelandrew –Rebuilding Slack.com “In the end, we discovered that a column-based grid wasn’t actually needed. Since Grid allows you to create a custom grid to match whatever layout you have, we didn’t need to force it into 12 columns. Instead, we created CSS Grid objects for some of the common layout patterns in the designs.” https://slack.engineering/rebuilding-slack-com-b124c405c193
  67. 67. @rachelandrew https://codepen.io/rachelandrew/pen/RLOxMB
  68. 68. @rachelandrew https://codepen.io/rachelandrew/pen/RLOxMB 300px 120px
  69. 69. @rachelandrew .media { display: grid; grid-template-columns: fit-content(300px) 1fr; grid-gap: 20px; } https://codepen.io/rachelandrew/pen/RLOxMB
  70. 70. @rachelandrew https://codepen.io/rachelandrew/pen/jGRzzv/
  71. 71. @rachelandrew .panel { display: grid; grid-gap: 1px; grid-template-columns: 1fr 1fr 3fr; grid-template-rows: minmax(100px, auto) minmax(50px, auto) minmax(250px, auto) minmax(50px, auto) minmax(150px, auto); } https://codepen.io/rachelandrew/pen/jGRzzv/
  72. 72. @rachelandrew https://codepen.io/rachelandrew/pen/jGRzzv/ Min 50px
 Max auto
  73. 73. @rachelandrew https://codepen.io/rachelandrew/pen/jGRzzv/ Min 50px
 Max auto Min 50px
 Max auto
  74. 74. @rachelandrew This is not exciting. But it will let you do exciting things.
  75. 75. @rachelandrew Why so complicated?
  76. 76. @rachelandrew More capability & flexibility means 
 more to learn
  77. 77. @rachelandrew It is all just lines.
  78. 78. @rachelandrew https://codepen.io/rachelandrew/pen/bomPLN/
  79. 79. @rachelandrew https://codepen.io/rachelandrew/pen/bomPLN/ 1 1 2 3 4 5 2 3 4 5 6
  80. 80. @rachelandrew .grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; grid-template-rows: 100px 100px 100px 100px; } .item { grid-column: 2 / 5; grid-row: 2 / 4; } https://codepen.io/rachelandrew/pen/bomPLN/
  81. 81. @rachelandrew https://codepen.io/rachelandrew/pen/oGQXjx/ 1 1 content-start 3 content-end 5 content-start 3 4 content-end 6
  82. 82. @rachelandrew .grid { display: grid; grid-template-columns: 1fr [content-start] 1fr 1fr 1fr [content-end] 1fr; grid-template-rows: 100px [content-start] 100px 100px [content-end] 100px; } .item { grid-column: content-start / content-end; grid-row: content-start / content-end; } https://codepen.io/rachelandrew/pen/oGQXjx/
  83. 83. @rachelandrew https://codepen.io/rachelandrew/pen/oGQXjx/ 1 1 content-start 3 content-end 5 content-start 3 4 content-end 6
  84. 84. @rachelandrew https://codepen.io/rachelandrew/pen/QqJbyB/ 1 1 content-start 3 content-end 5 content-start 3 4 content-end 6 content
  85. 85. @rachelandrew .grid { display: grid; grid-template-columns: 1fr [content-start] 1fr 1fr 1fr [content-end] 1fr; grid-template-rows: 100px [content-start] 100px 100px [content-end] 100px; } .item { grid-area: content; } https://codepen.io/rachelandrew/pen/QqJbyB/
  86. 86. @rachelandrew .grid { display: grid; grid-template-columns: 1fr [content-start] 1fr 1fr 1fr [content-end] 1fr; grid-template-rows: 100px [content-start] 100px 100px [content-end] 100px; } .item { grid-area: content / content / content / content; } https://codepen.io/rachelandrew/pen/QqJbyB/
  87. 87. @rachelandrew grid-area: content / content / content / content; https://codepen.io/rachelandrew/pen/QqJbyB/ grid-row-start grid-column-start grid-row-end grid-column-end
  88. 88. @rachelandrew https://codepen.io/rachelandrew/pen/QqJbyB/ 1 1 content-start content 3 content-end content 5 content-start content 3 4 content-end content 6 content
  89. 89. @rachelandrew grid-area: content / content / content / content; https://codepen.io/rachelandrew/pen/QqJbyB/ grid-row-start grid-column-start grid-row-end grid-column-end
  90. 90. @rachelandrew grid-area: content / content / content ; https://codepen.io/rachelandrew/pen/QqJbyB/ grid-row-start grid-column-start grid-row-end • grid-column-end is set to the value used for grid-column-start, which is ‘content’.
  91. 91. @rachelandrew grid-area: content / content ; https://codepen.io/rachelandrew/pen/QqJbyB/ grid-row-start grid-column-start • grid-row-end is set to the value used for grid-column-start, which is ‘content’. • grid-column-end is set to the value used for grid-column-start, which is ‘content’.
  92. 92. @rachelandrew grid-area: content ; https://codepen.io/rachelandrew/pen/QqJbyB/ grid-row-start • The other three values are set to the same as grid-row-start, so all are set to ‘content’
  93. 93. @rachelandrew .grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; grid-template-rows: 100px 100px 100px 100px; grid-template-areas: ". . . . ." ". content content content ." ". content content content ." ". . . . ." } .item { grid-area: content ; } https://codepen.io/rachelandrew/pen/xXQGVG/
  94. 94. @rachelandrew https://codepen.io/rachelandrew/pen/xXQGVG/ 1 1 content 3 content 5 content 3 4 content 6 content content content content content content
  95. 95. @rachelandrew https://codepen.io/rachelandrew/pen/xXQGVG/ 1 1 content 3 content 5 content 3 4 content 6 content content content content content content
  96. 96. @rachelandrew https://codepen.io/rachelandrew/pen/xXQGVG/ 1 1 content content-start 3 5 content
 content-start 3 4 content content-end 6 content content content content content content content content-end
  97. 97. @rachelandrew .grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; grid-template-rows: 100px 100px 100px 100px; grid-template-areas: ". . . . ." ". content content content ." ". content content content ." ". . . . ." } .item { grid-area: content ; } .item2 { grid-row-start: content-start; grid-column-start: content-end; } https://codepen.io/rachelandrew/pen/xXQGVG/
  98. 98. @rachelandrew https://codepen.io/rachelandrew/pen/xXQGVG
  99. 99. @rachelandrew You have real choice for the first time.
  100. 100. @rachelandrew What would be the best method to achieve this design pattern?
  101. 101. @rachelandrew Could we solve this problem with a new design pattern?
  102. 102. @rachelandrew Instead of “which patterns does our framework give us to use?”
  103. 103. @rachelandrew How old is the oldest CSS in your project?
  104. 104. @rachelandrew 368 people working on existing projects 29 had CSS in their codebase written 10 years or more ago.
  105. 105. @rachelandrew Old CSS in your project doesn’t mean you can’t use new CSS.
  106. 106. @rachelandrew This is where understanding CSS comes in really useful.
  107. 107. @rachelandrew https://codepen.io/rachelandrew/pen/wrbwOz/
  108. 108. @rachelandrew https://codepen.io/rachelandrew/pen/wrbwOz/
  109. 109. @rachelandrew img { max-width: 100%; } .gallery { display: grid; grid-template-columns: repeat(auto-fill,minmax(200px,1fr)); grid-gap: 10px 20px; grid-auto-flow: dense; } .portrait { grid-row-end: span 2; } figcaption { text-align: center; font-size: 1.5em; } https://codepen.io/rachelandrew/pen/wrbwOz/
  110. 110. @rachelandrew Creating systems with new layout.
  111. 111. @rachelandrew Other layout methods still exist.
  112. 112. @rachelandrew https://codepen.io/rachelandrew/pen/ZXNYob/ Floating the image means the text wraps round. Defining a grid on the container means we don’t get the wrapping behaviour.
  113. 113. @rachelandrew https://codepen.io/rachelandrew/pen/RLmNvY/ Using column-width of 200px means we get more columns if there is room, fewer with less available width. Multi-column layout splits content into equal width columns.
  114. 114. @rachelandrew https://codepen.io/rachelandrew/pen/OxYVmL Flex items with the value of justify-content set to space-between. I also use flexbox to centre the word in the circle.
  115. 115. @rachelandrew You don’t need a grid-shaped hammer for every layout task.
  116. 116. @rachelandrew Off-the-shelf frameworks are designed to solve generic problems.
  117. 117. @rachelandrew Do you want your project to inherit the CSS issues of the rest of the world?
  118. 118. @rachelandrew Build your own framework*
 
 * framework doesn’t mean “all-encompassing behemoth”
  119. 119. @rachelandrew Solving your specific problems only will result in lighter, easier to understand code
  120. 120. @rachelandrew @mixin gridded($type: grid, $col: 20em, $gap: 20px) { @if ($type == 'flex') { display: flex; flex-wrap: wrap; margin-left: -#{$gap} ; > * { flex: 1 1 $col; margin: 0 0 $gap $gap; } } @if ($type == 'grid') { display: grid; grid-template-columns: repeat(auto-fill, minmax($col,1fr)); grid-gap: $gap; } @if ($type == 'multicol') { column-gap: $gap; column-width: $col; } } https://codepen.io/rachelandrew/pen/dVEojr/
  121. 121. @rachelandrew .multicol { @include gridded('multicol',200px,20px); } .grid{ @include gridded('grid',200px,20px); } .flex { @include gridded('flex',200px,20px); } https://codepen.io/rachelandrew/pen/dVEojr/
  122. 122. @rachelandrew https://codepen.io/rachelandrew/pen/dVEojr/
  123. 123. @rachelandrew Working with less capable browsers. These may not always be old browsers.
  124. 124. @rachelandrew A lack of understanding on one side. A lack of confidence on the other.
  125. 125. @rachelandrew https://web.archive.org/web/20060318055841/http://developer.yahoo.com/yui/articles/gbs/gbs_browser-chart.html
  126. 126. @rachelandrew Building confidence in your CSS skills will help you to make your case to use newer methods. (Although quite often asking permission is optional)
  127. 127. @rachelandrew Old browser versions 39% 
 of survey respondents cited IE11 as oldest IE supported.
  128. 128. @rachelandrew Old browser versions 63% 
 of survey respondents support IE10+
  129. 129. @rachelandrew IE10 & 11 have the -ms prefixed older version of grid layout. https://rachelandrew.co.uk/archives/2016/11/26/should-i-try-to-use-the-ie-implementation-of-css-grid-layout/
  130. 130. @rachelandrew For other desktop browsers supporting 
 the last 2 versions is common.
  131. 131. @rachelandrew http://caniuse.com/#search=css%20grid
  132. 132. @rachelandrew http://caniuse.com/#search=css%20grid
  133. 133. @rachelandrew Many browsers without support for Grid and other new CSS at this point are mobile browsers.
  134. 134. @rachelandrew Many of the browsers without support are most popular in areas where data is expensive or devices less powerful.
  135. 135. @rachelandrew –Survey responses “Grid too young and would need a ton of polyfills.” “Lack of a good css grid polyfill that works with postcss and supports not so old browsers”
  136. 136. @rachelandrew Stop looking for polyfills and shims. They will make the experience worse for less capable browsers and devices.
  137. 137. @rachelandrew Using Grid rather than loading a big framework can help create a better experience even for browsers that don’t support Grid.
  138. 138. @rachelandrew Feature Queries - use CSS to ask if the browser supports a feature before using it.
  139. 139. @rachelandrew Create complex layouts for browsers that support them with a few lines of CSS.
  140. 140. @rachelandrew Making the web available to everyone. 
 That’s exciting.
  141. 141. @rachelandrew –Me, in a survey question “Q. How do you feel when you see a new 
 CSS feature announced?”
  142. 142. @rachelandrew “Excited!”
  143. 143. Thank you! @rachelandrew

×