Download as PDF, PPTX
Uploaded byRachel Andrew
All Day Hey! Unlocking The Power of CSS Grid Layout
- The document provides an overview and examples of CSS Grid Layout features such as grid-template-columns, grid-template-rows, grid-gap, grid-column, grid-row, and more. - It demonstrates how to size grid tracks using fixed, intrinsic, and flexible sizing functions like fr units, minmax(), auto, fit-content(), and others. - Examples are given for aligning and aligning content within grids using properties like justify-content, align-content, justify-items, align-items and more.
All Day Hey! Unlocking The Power of CSS Grid Layout
- 1. Unlocking the Powerof CSS Grid Layout @rachelandrew All Day Hey! Leeds, 2018
- 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.