Download as PDF, PPTX
Uploaded byRachel Andrew
Into the Weeds of CSS Layout
The document provides a summary of Rachel Andrew's presentation on CSS layout at Smashing Conf London. It includes links to various CSS specifications and code examples demonstrating different CSS layout techniques like grid sizing, intrinsic sizing, flexible lengths with fr units, minimum and maximum sizing, and responsive design patterns using media queries and feature queries.
Into the Weeds of CSS Layout
- 1. @rachelandrew at SmashingConf London Into the Weeds of CSS Layout https://www.flickr.com/photos/protake/17383852206/
- 2.
- 3. How big isthat box?
- 4.
- 5.
- 7.
- 8. How big isa grid?
- 10. –11.1 Grid SizingAlgorithm “Each track has specified minimum and maximum sizing functions (which may be the same).” https://drafts.csswg.org/css-grid-1/#layout-algorithm
- 11. ❖ Fixed sizing: lengths such as px or em, or a resolvable percentage ❖ An intrinsic sizing function auto, min-content, max-content, fit-content ❖ A flexible sizing function The fr unit https://drafts.csswg.org/css-grid-1/#layout-algorithm
- 12. Intrinsic Sizing auto Default sizeof grid tracks. Tracks sized auto will stretch to take up space in the grid container.
- 13.
- 14. Intrinsic Sizing: auto Theauto-sized track will stretch in the inline direction. Use justify-content: start to override the stretching behaviour. .grid { display: grid; grid-gap: 10px; grid-template-columns: min-content max-content fit-content(10ch) auto; justify-content: start; } https://codepen.io/rachelandrew/pen/ppYPZR
- 15. Intrinsic Sizing min-content The smallestsize the item can be, taking advantage of all soft-wrapping opportunities.
- 16. Intrinsic Sizing: min-content Gridtracks sized with min-content will become as small as they can without causing overflows. .grid { display: grid; grid-gap: 10px; grid-template-columns: min-content min-content min-content; } https://codepen.io/rachelandrew/pen/VyOpXj
- 17. https://codepen.io/rachelandrew/pen/VyOpXj The word ‘columns’ isdefining the size of track 1. This item has a width which defines the size of track 2 A 100px image defines the size of track 3
- 18. Intrinsic Sizing max-content Thelargest size the track can be, no soft- wrapping will occur. Overflows may happen.
- 19. Intrinsic Sizing: max-content Gridtracks sized with max-content will become as large as needed, and may overflow the grid container. .grid { display: grid; grid-gap: 10px; grid-template-columns: max-content max-content max-content; } https://codepen.io/rachelandrew/pen/xpNdxV
- 20. https://codepen.io/rachelandrew/pen/xpNdxV Tracks 1 and2 need to be wide enough to fit the unwrapped text. A 100px image defines the size of track 3
- 21. Intrinsic Sizing fit-content Actlike max-content until it reaches the passed in value.
- 22. Intrinsic Sizing: fit-content Gridtracks sized with fit-content will act like max-content until they hit the limit given. .grid { display: grid; grid-gap: 10px; grid-template-columns: fit-content(10em) fit-content(10em) fit-content(15ch); } https://codepen.io/rachelandrew/pen/Mrdobm
- 23. https://codepen.io/rachelandrew/pen/Mrdobm Track 3 is fit-content(15ch) Columns 1 and 2 are both fit-content(10em). Track 1 wraps at 10em. Track 2 is max-content.
- 24. Flexible lengths Sizing withfr units The fr unit describes a flexible length
- 25. Flexible lengths The frunit is a <flex> unit and represents a portion of the available space in the Grid Container. .grid { display: grid; grid-gap: 10px; grid-template-columns: 2fr 1fr 1fr; } https://codepen.io/rachelandrew/pen/QaXvPe
- 26.
- 27. Minimum & Maximumsizing functions
- 28.
- 29. Minimum Sizing Function Theminimum size for these two tracks is 100px, and 10em. .grid { display: grid; grid-template-columns: minmax(100px, auto) minmax(10em, 20em); }
- 30. Minimum Sizing Function Theminimum size of these two tracks is auto. .grid { display: grid; grid-template-columns: 10fr fit-content(10em); }
- 31. Minimum Sizing Function Theminimum size of the first track is 100px, the second track is 50px (10% of 500). .grid { width: 500px; display: grid; grid-template-columns: 100px 10%; }
- 32. Maximum Sizing Function Themaximum size for these two tracks is 400px, and 20em. .grid { display: grid; grid-template-columns: minmax(100px, 400px) minmax(10em, 20em); }
- 33. Maximum Sizing Function Themaximum size for the first track is max-content. For the second track the maximum is 10em. .grid { display: grid; grid-template-columns: auto fit-content(10em); }
- 34.
- 35. https://codepen.io/rachelandrew/pen/goNRVp 200px 200px 200px 620px Autosized row expands to make room for content
- 36. https://codepen.io/rachelandrew/pen/BJgdKL Auto sized row expandsto make room for content 1fr 1fr 1fr
- 37. What is afr unit anyway? A track sized with 1fr, is actually sized minmax(auto, 1fr). The minimum size is auto. .grid { display: grid; grid-template-columns: 1fr 1fr 1fr; }
- 38.
- 39. What is afr unit anyway? Make the minimum size 0, to force three equal width columns - even if that means overflows. .grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); }
- 40.
- 41.
- 42. As many flexiblecolumns as will fit Use auto-fill or auto-fit along with repeat and minmax, to create as many flexible columns with a minimum size as will fit into the container. .grid { display: grid; grid-gap: 10px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); grid-auto-rows: 100px; } https://codepen.io/rachelandrew/pen/WdVjdg
- 43.
- 44.
- 45. Dense Packing Mode Usingthe value dense for grid-auto-flow will cause items to be displayed out of document order. .grid { display: grid; grid-gap: 10px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); grid-auto-rows: 100px; grid-auto-flow: dense; } https://codepen.io/rachelandrew/pen/ZvgKNY
- 46.
- 47. This must bepretty slow, right?
- 48.
- 49. A Flexbox Gridwith Bootstrap 4 Uses flexbox for the grid, I used the default Bootstrap grid classes. <div class="container-fluid"> <div class="row"> <div class="col-sm">One of three columns</div> <div class="col-sm">One of three columns</div> <div class="col-sm">One of three columns</div> </div> <div class="row"> <div class="col-sm">One of four columns</div> <div class="col-sm">One of four columns</div> <div class="col-sm">One of four columns</div> <div class="col-sm">One of four columns</div> </div> <div class="row"> <div class="col">1 of 3</div> <div class="col-6">2 of 3 (wider)</div> <div class="col">3 of 3</div> </div> <!— repeat 999 times —> </div> https://rachelandrew.github.io/into-the-weeds/bootstrap/
- 50. A Float BasedGrid with Column Setter Using floats with this Sass-based framework. .row::after { content: ""; display: block; clear: both; } .row > div { border: 5px solid #6c5b7b; border-radius: 5px; padding: 10px; min-height: 100px; margin-bottom: 20px; } .four-cols { width: 31.42857%; float: left; margin-right: 2.85714%; } .three-cols { width: 22.85714%; float: left; margin-right: 2.85714%; } .six-cols { width: 48.57143%; float: left; margin-right: 2.85714%; } .row > :last-child { margin-right: 0; } https://rachelandrew.github.io/into-the-weeds/grid/
- 51. CSS Grid We lostthe row wrappers in the HTML for the Grid version. .grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 100px; grid-gap: 20px; } .four-cols { grid-column: auto / span 4; } .three-cols { grid-column: auto / span 3; } .six-cols { grid-column: auto / span 6; }
- 55. –everyone on theweb “Where is my magic Grid Polyfill?”
- 56.
- 57.
- 60.
- 61. We develop inan environment far more powerful than that of our users.
- 62. Testing often doesnot reflect realistic day to day use, or realistic data.
- 63. please stop askingthis question “Where is my magic Grid Polyfill?”
- 64.
- 65.
- 66. New CSS canhelp you create better experiences in browsers that don’t support new CSS.
- 67. A 12 columnlayout .grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 100px; grid-gap: 20px; } .four-cols { grid-column: auto / span 4; } .three-cols { grid-column: auto / span 3; } .six-cols { grid-column: auto / span 6; }
- 68. New CSS knowsabout old CSS
- 69. ❖ Media Queries: tailor your design according to features of the device ❖ Feature Queries: tailor your design to the support in the browser
- 70.
- 71. Adding a verticalcentre line either side of the text Using generated content to add a border. header h1 { text-align: center; display: grid; grid-template-columns: 1fr auto 1fr; grid-gap: 20px; } header h1:before, header h1:after { content: ""; align-self: center; border-top: 1px solid rgba(37,46,63,.5); } https://codepen.io/rachelandrew/pen/aqbdOy
- 72.
- 73. Feature Queries Test fora CSS feature, and apply the CSS if it exists in that browser. header h1 { text-align: center; display: grid; grid-template-columns: 1fr auto 1fr; grid-gap: 20px; } @supports (display: grid) { header h1:before, header h1:after { content: ""; align-self: center; border-top: 1px solid rgba(37,46,63,.5); } } https://codepen.io/rachelandrew/pen/aqbdOy
- 74.
- 75. Creating circles fromsquares Use border-radius Don’t forget that old CSS still exists! header img { border-radius: 50%; margin: 0 auto 2em auto; } https://codepen.io/rachelandrew/pen/aqbdOy
- 76. CSS Shapes Floating theimage and curving the text round once the screen is wide enough to do so. header img { border-radius: 50%; margin: 0 auto 2em auto; } @media (min-width: 30em) { header img { float: left; shape-outside: margin-box; margin: 0 20px 0 0; } } https://codepen.io/rachelandrew/pen/aqbdOy
- 77.
- 78.
- 79.
- 80. Multi-column layout Well supported,responsive by default. section { column-width: 15em; } https://codepen.io/rachelandrew/pen/aqbdOy
- 81. Vertical Media Queries Dowe have enough height to show the columns without vertical scrolling? @media (min-height: 500px) { section { column-width: 15em; } } https://codepen.io/rachelandrew/pen/aqbdOy
- 82.
- 83. Creating columns ofcards Matching the minimum grid width, and the gap to the multi- column width and column-gap. .resources { max-width: 60em; } .resources { margin: 1em auto; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(15em,1fr)); grid-gap: 1em; } .resources li.image { grid-row: auto / span 2; } https://codepen.io/rachelandrew/pen/aqbdOy
- 84.
- 85. Using in-line: blockas a fallback We only need to over-ride the width and margin in a Feature Query. @media (min-width: 40em) { .resources li { display: inline-block; width: 47%; margin: 0 1% 1em 1%; vertical-align: top; } } @supports (display: grid) { .resources li { width: auto; margin: 0; } } https://codepen.io/rachelandrew/pen/aqbdOy
- 86.
- 87. Using multi-column layoutas a fallback We don’t need to override the column-* properties. They are ignored once we are in grid layout. @media (min-width: 40em) { .resources { column-width: 15em; } .resources li { break-inside: avoid; } }
- 89. We can achievea lot with a little CSS.
- 90. Before worrying ifa technique performs well, ask yourself if you need it at all.
- 91. Reframe the browsersupport conversation.
- 92. We have thetools to provide great experiences for everyone.
- 93.