Downloaded 26 times
Uploaded byRachel Andrew
SmashingConf SF: Unlocking the Power of CSS Grid Layout
The document presents a comprehensive guide on CSS Grid Layout features and techniques showcased during a presentation at the Smashing Conference in San Francisco, 2018. It covers various sizing functions, alignment options, and advanced grid configurations, along with practical code snippets and links to live examples. The emphasis is on leveraging new CSS capabilities to create responsive and flexible layouts, ensuring cross-browser support and introducing fallbacks when necessary.
More Related Content
Similar to SmashingConf SF: Unlocking the Power of CSS Grid Layout
SmashingConf SF: Unlocking the Power of CSS Grid Layout
- 1. @rachelandrew Smashing Conference,San Francisco 2018 Unlocking the Power of CSS Grid Layout
- 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. Upside down andback to front
- 48. The grid-area property Orderof the lines: • grid-row-start • grid-column-start • grid-row-end • grid-column-end .item { grid-area: 1 / 2 / 3 / 4; }
- 49. Logical Properties andWriting Modes
- 50. Inline dimension oraxis Horizontal Writing Mode Block dimension or axis
- 51. Block dimension or axis VerticalWriting Mode Inline dimension or axis
- 52. Inline axis Block axis GridLayout in Horizontal Writing Mode
- 53. flex-direction: row Main axis Crossaxis flex-direction: column Cross axis Main axis Flex Layout in Horizontal Writing Mode
- 54.
- 55. Horizontal LR grid-row-start: 1 grid-row-end:3 grid-column-start:1 grid-area: 1 / 1 / 3 / 3; grid-column-end:3
- 56. Horizontal RL grid-row-start: 1 grid-row-end:3 grid-column-start:1 grid-area: 1 / 1 / 3 / 3; grid-column-end:3
- 57. Vertical LR grid-column-start: 1 grid-column-end:3 grid-row-end:3 grid-area: 1 / 1 / 3 / 3; grid-row-start:1
- 58. The Firefox GridInspector
- 59.
- 60. ❖ Align thetracks: this requires extra space in the grid container ❖ Align the items move content around inside the area it has been placed into
- 61.
- 62. Aligning tracks The trackscreated on this grid do not fill the width and height defined on the grid container. .grid { display: grid; width: 800px; height: 500px; grid-gap: 10px; grid-template-columns: 200px 200px 200px; grid-template-rows: 150px 150px; } https://codepen.io/rachelandrew/pen/RMMqLd
- 63.
- 64. align-content and justify-content Aligningtracks What should I do with free space in the Grid Container?
- 65. ❖ align-content align tracksin the Block Dimension ❖ justify-content align tracks in the Inline Dimension
- 66.
- 67.
- 68. Keyword values ❖ space-between ❖space-around ❖ space-evenly .grid { display: grid; width: 800px; height: 500px; grid-gap: 10px; grid-template-columns: 200px 200px 200px; grid-template-rows: 150px 150px; justify-content: space-between; align-content: space-around; }
- 69. justify-content: space-between Inline axis align-content:space-around Block axis
- 70.
- 71.
- 72.
- 73. Writing Modes Once againthe grid works the same way whichever way up it is. .grid { display: grid; inline-size: 800px; block-size: 500px; grid-gap: 10px; grid-template-columns: 200px 200px 200px; grid-template-rows: 150px 150px; justify-content: end; align-content: center; writing-mode: vertical-lr; } https://codepen.io/rachelandrew/pen/wmmNaj
- 74.
- 75. align-items and justify-items Aligningitems Setting the align-self and justify-self values of individual Grid Items.
- 76. ❖ align-items /align-self set alignment of items in the Block Dimension ❖ justify-items / justify-self set alignment of items in the Inline Dimension
- 77.
- 78.
- 79.
- 80.
- 81. align-self and justify-self Targetindividual items to set alignment. .grid { display: grid; width: 800px; height: 500px; grid-gap: 10px; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; align-items: start; justify-items: end; } .grid img { align-self: stretch; justify-self: stretch; }
- 82.
- 83. Please stop askingme this question. “Where is my magic Grid Polyfill?”
- 84.
- 85. To polyfill gridis to force expensive JavaScript onto the slowest browsers and devices.
- 86. New CSS canhelp you create better experiences in browsers that don’t support new CSS.
- 87. A 12 columnlayout This is all you need. No framework required. .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; }
- 88. New CSS knowsabout old CSS
- 89. ❖ Media Queries: tailor your design according to features of the device ❖ Feature Queries: tailor your design to the support in the browser
- 90.
- 91. 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
- 92.
- 93. 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
- 94.
- 95. 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
- 96. 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
- 97.
- 98.
- 99.
- 100. Multi-column layout Well supported,responsive by default. section { column-width: 15em; } https://codepen.io/rachelandrew/pen/aqbdOy
- 101. 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
- 102.
- 103. 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
- 104.
- 105. 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
- 106.
- 107. 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; } }
- 109. We can achievea lot with a little CSS.
- 110. Before worrying ifa technique performs well, ask yourself if you need it at all.
- 111. Reframe the browsersupport conversation.
- 112. We have thetools to provide great experiences for everyone.
- 113.