Unlocking the Power of CSS Grid Layout

A presentation at Frontend Conference in August 2018 in Zürich, Switzerland by Rachel Andrew

Slide 1

@rachelandrew Frontend Conf Zurich, August 2018 Unlocking the Power of CSS Grid Layout

Slide 2

https://www.w3.org/TR/css-grid-2/

Slide 3

How big is that box?

Slide 4

https://alistapart.com/article/fluidgrids

Slide 5

https://twitter.com/devine_howest/status/959036561839960070

Slide 6

Slide 7

https://www.smashingmagazine.com/2018/01/understanding-sizing-css-layout/

Slide 8

How big is a grid?

Slide 9

Slide 10

https://drafts.csswg.org/css-grid-1/#layout-algorithm “Each track has specified minimum and maximum sizing functions (which may be the same).” –11.1 Grid Sizing Algorithm

Slide 11

https://drafts.csswg.org/css-grid-1/#layout-algorithm ❖ Fixed sizing: ❖ An intrinsic sizing function ❖ A flexible sizing function lengths such as px or em, or a resolvable percentage auto, min-content, max-content, fit-content The fr unit

Slide 12

Intrinsic Sizing auto Default size of grid tracks. Tracks sized auto will stretch to take up space in the grid container.

Slide 13

https://codepen.io/rachelandrew/pen/ppYPZR justify-content: stretch justify-content: start

Slide 14

https://codepen.io/rachelandrew/pen/ppYPZR Intrinsic Sizing: auto The auto-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; }

Slide 15

Intrinsic Sizing min-content The smallest size the item can be, taking advantage of all soft-wrapping opportunities.

Slide 16

https://codepen.io/rachelandrew/pen/VyOpXj Intrinsic Sizing: min-content Grid tracks 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; }

Slide 17

https://codepen.io/rachelandrew/pen/VyOpXj The word ‘columns’ is defining the size of track 1. A 100px image defines the size of track 3 This item has a width which defines the size of track 2

Slide 18

Intrinsic Sizing max-content The largest size the track can be, no softwrapping will occur. Overflows may happen.

Slide 19

https://codepen.io/rachelandrew/pen/xpNdxV Intrinsic Sizing: max-content Grid tracks 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; }

Slide 20

https://codepen.io/rachelandrew/pen/xpNdxV Tracks 1 and 2 need to be wide enough to fit the unwrapped text. A 100px image defines the size of track 3

Slide 21

Intrinsic Sizing fit-content Act like max-content until it reaches the passed in value.

Slide 22

https://codepen.io/rachelandrew/pen/Mrdobm Intrinsic Sizing: fit-content Grid tracks 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); }

Slide 23

https://codepen.io/rachelandrew/pen/Mrdobm Columns 1 and 2 are both fit-content(10em). Track 1 wraps at 10em. Track 2 is max-content. Track 3 is fit-content(15ch)

Slide 24

Flexible lengths Sizing with fr units The fr unit describes a flexible length

Slide 25

https://codepen.io/rachelandrew/pen/QaXvPe Flexible lengths The fr unit 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; }

Slide 26

https://codepen.io/rachelandrew/pen/QaXvPe 2fr 1fr 1fr

Slide 27

Minimum & Maximum sizing functions

Slide 28

minmax()

Slide 29

Minimum Sizing Function The minimum size for these two tracks is 100px, and 10em. .grid { display: grid; grid-template-columns: minmax(100px, auto) minmax(10em, 20em); }

Slide 30

Minimum Sizing Function The minimum size of these two tracks is auto. .grid { display: grid; grid-template-columns: 10fr fit-content(10em); }

Slide 31

Minimum Sizing Function The minimum 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%; }

Slide 32

Maximum Sizing Function The maximum size for these two tracks is 400px, and 20em. .grid { display: grid; grid-template-columns: minmax(100px, 400px) minmax(10em, 20em); }

Slide 33

Maximum Sizing Function The maximum 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); }

Slide 34

https://codepen.io/rachelandrew/pen/aEgwKY 200px 200px 200px 200px 410px 200px 620px

Slide 35

https://codepen.io/rachelandrew/pen/goNRVp 200px 200px Auto sized row expands to make room for content 620px 200px

Slide 36

https://codepen.io/rachelandrew/pen/BJgdKL 1fr Auto sized row expands to make room for content 1fr 1fr

Slide 37

What is a fr 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; }

Slide 38

https://codepen.io/rachelandrew/pen/BJgdKL 1fr 1fr 1fr

Slide 39

What is a fr 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); }

Slide 40

minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)

Slide 41

1fr 1fr 1fr

Slide 42

https://codepen.io/rachelandrew/pen/WdVjdg As many flexible columns 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; }

Slide 43

https://codepen.io/rachelandrew/pen/WdVjdg

Slide 44

https://codepen.io/rachelandrew/pen/WdVjdg

Slide 45

https://codepen.io/rachelandrew/pen/ZvgKNY Dense Packing Mode Using the 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; }

Slide 46

https://codepen.io/rachelandrew/pen/ZvgKNY

Slide 47

Upside down and back to front

Slide 48

The grid-area property Order of the lines: • • • • grid-row-start grid-column-start grid-row-end grid-column-end .item { grid-area: 1 / 2 / 3 / 4; }

Slide 49

Logical Properties and Writing Modes

Slide 50

Horizontal Writing Mode Inline dimension or axis Block dimension or axis

Slide 51

Vertical Writing Mode Block dimension or axis Inline dimension or axis

Slide 52

Grid Layout in Horizontal Writing Mode Inline axis Block axis

Slide 53

Flex Layout in Horizontal Writing Mode flex-direction: column Cross axis flex-direction: row Main axis Cross axis Main axis

Slide 54

Horizontal LR

Slide 55

Horizontal LR grid-area: 1 / 1 / 3 / 3; grid-row-end: 3 grid-column-end: 3 grid-column-start: 1 grid-row-start: 1

Slide 56

Horizontal RL grid-area: 1 / 1 / 3 / 3; grid-row-end: 3 grid-column-start: 1 grid-column-end: 3 grid-row-start: 1

Slide 57

Vertical LR grid-area: 1 / 1 / 3 / 3; grid-column-end: 3 grid-row-end: 3 grid-row-start: 1 grid-column-start: 1

Slide 58

The Firefox Grid Inspector

Slide 59

Alignment and the Grid

Slide 60

❖ Align the tracks: ❖ Align the items this requires extra space in the grid container move content around inside the area it has been placed into

Slide 61

https://www.w3.org/TR/css-align-3/ Box Alignment Specification

Slide 62

https://codepen.io/rachelandrew/pen/RMMqLd Aligning tracks The tracks created 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; }

Slide 63

https://codepen.io/rachelandrew/pen/RMMqLd start start

Slide 64

align-content and justify-content Aligning tracks What should I do with free space in the Grid Container?

Slide 65

❖ ❖ align-content align tracks in the Block Dimension justify-content align tracks in the Inline Dimension

Slide 66

https://codepen.io/rachelandrew/pen/RMMqLd justify-content: end Inline axis

Slide 67

align-content: center Block axis

Slide 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; }

Slide 69

justify-content: space-between Inline axis align-content: space-around Block axis

Slide 70

https://codepen.io/rachelandrew/pen/QmmzYx

Slide 71

https://codepen.io/rachelandrew/pen/QmmzYx justify-content: space-between Inline axis align-content: space-around Block axis

Slide 72

align-content: center Block axis https://codepen.io/rachelandrew/pen/wmmNaj justify-content: end Inline axis

Slide 73

https://codepen.io/rachelandrew/pen/wmmNaj Writing Modes Once again the 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; }

Slide 74

https://www.smashingmagazine.com/2018/03/understanding-logical-properties-values/

Slide 75

align-items and justify-items Aligning items Setting the align-self and justify-self values of individual Grid Items.

Slide 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

Slide 77

https://codepen.io/rachelandrew/pen/dmmQVg stretch stretch start start

Slide 78

https://codepen.io/rachelandrew/pen/dmmQVg justify-items: end Inline axis

Slide 79

https://codepen.io/rachelandrew/pen/dmmQVg align-items: start Block axis

Slide 80

https://codepen.io/rachelandrew/pen/dmmQVg

Slide 81

align-self and justify-self Target individual 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; }

Slide 82

https://codepen.io/rachelandrew/pen/dmmQVg

Slide 83

“Where is my magic Grid Polyfill?” Please stop asking me this question.

Slide 84

https://caniuse.com/#feat=css-grid

Slide 85

To polyfill grid is to force expensive JavaScript onto the slowest browsers and devices.

Slide 86

New CSS can help you create better experiences in browsers that don’t support new CSS.

Slide 87

A 12 column layout 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; }

Slide 88

New CSS knows about old CSS

Slide 89

❖ Media Queries: ❖ Feature Queries: tailor your design according to features of the device tailor your design to the support in the browser

Slide 90

https://codepen.io/rachelandrew/pen/aqbdOy

Slide 91

https://codepen.io/rachelandrew/pen/aqbdOy Adding a vertical centre 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); }

Slide 92

https://codepen.io/rachelandrew/pen/aqbdOy

Slide 93

https://codepen.io/rachelandrew/pen/aqbdOy Feature Queries Test for a 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); } }

Slide 94

No Grid Grid https://codepen.io/rachelandrew/pen/aqbdOy

Slide 95

https://codepen.io/rachelandrew/pen/aqbdOy Creating circles from squares Use border-radius Don’t forget that old CSS still exists! header img { border-radius: 50%; margin: 0 auto 2em auto; }

Slide 96

https://codepen.io/rachelandrew/pen/aqbdOy CSS Shapes Floating the image 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; } }

Slide 97

https://codepen.io/rachelandrew/pen/aqbdOy

Slide 98

https://codepen.io/rachelandrew/pen/aqbdOy

Slide 99

https://codepen.io/rachelandrew/pen/aqbdOy

Slide 100

https://codepen.io/rachelandrew/pen/aqbdOy Multi-column layout Well supported, responsive by default. section { column-width: 15em; }

Slide 101

https://codepen.io/rachelandrew/pen/aqbdOy Vertical Media Queries Do we have enough height to show the columns without vertical scrolling? @media (min-height: 500px) { section { column-width: 15em; } }

Slide 102

https://codepen.io/rachelandrew/pen/aqbdOy

Slide 103

https://codepen.io/rachelandrew/pen/aqbdOy Creating columns of cards 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; }

Slide 104

https://codepen.io/rachelandrew/pen/aqbdOy

Slide 105

https://codepen.io/rachelandrew/pen/aqbdOy Using in-line: block as 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; } }

Slide 106

https://codepen.io/rachelandrew/pen/aqbdOy

Slide 107

Using multi-column layout as 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; }

Slide 108

Slide 109

We can achieve a lot with a little CSS.

Slide 110

Before worrying if a technique performs well, ask yourself if you need it at all.

Slide 111

Reframe the browser support conversation.

Slide 112

We have the tools to provide great experiences for everyone.

Slide 113

https://noti.st/rachelandrew Thank you! @rachelandrew https://rachelandrew.co.uk