Grids All The Way Down

A presentation at Frontend United in May 2019 in Utrecht, Netherlands by Rachel Andrew

Slide 1

Slide 1

Grids All The Way Down @rachelandrew at Frontend United Slides & resources https://noti.st/rachelandrew

Slide 2

Slide 2

Doing things on the web since 1996 Co-founder Perch CMS & Notist. Editor in Chief Smashing Magazine. Writer of many books. CSS Working Group Member representing Fronteers. Spec editor Multicol and Page Floats. MDN tech writer. Slides & resources https://noti.st/rachelandrew

Slide 3

Slide 3

CSS Grid Layout Two years on. Slides & resources https://noti.st/rachelandrew

Slide 4

Slide 4

“I can make flexbox do anything. Why should I learn grid?” Slides & resources https://noti.st/rachelandrew

Slide 5

Slide 5

“Should I use colour in this web design, or will fonts do?” Slides & resources https://noti.st/rachelandrew

Slide 6

Slide 6

“Should I build my site using Flexbox or Grid?” Slides & resources https://noti.st/rachelandrew

Slide 7

Slide 7

Stop thinking about Flexbox & Grid as two separate layout methods Slides & resources https://noti.st/rachelandrew

Slide 8

Slide 8

Should I build my site using Flexbox or Grid? YES. Slides & resources https://noti.st/rachelandrew

Slide 9

Slide 9

Slides & resources https://noti.st/rachelandrew

Slide 10

Slide 10

Look at the pattern you need to build. That will tell you which layout method you need. Slides & resources https://noti.st/rachelandrew

Slide 11

Slide 11

Flexbox when you have a bunch of different size stuff you want displayed in a readable way. Slides & resources https://noti.st/rachelandrew

Slide 12

Slide 12

Slides & resources https://noti.st/rachelandrew

Slide 13

Slide 13

Grid for when you want to control the structure and place items into it. Slides & resources https://noti.st/rachelandrew

Slide 14

Slide 14

Slides & resources https://noti.st/rachelandrew

Slide 15

Slide 15

If you are putting widths on all your flex items to make them line up. You probably want grid. Slides & resources https://noti.st/rachelandrew

Slide 16

Slide 16

Slides & resources https://noti.st/rachelandrew

Slide 17

Slide 17

Slides & resources https://noti.st/rachelandrew

Slide 18

Slide 18

/* flex / .airplanes { display: flex; flex-wrap: wrap; } .airplanes li { flex: 1 1 400px; height: 45vh; margin: 2vh 10px; } / grid */ .airplanes { display: grid; grid-gap: 5vh; grid-template-columns: repeat(auto-fill, minmax(400px, auto)); grid-auto-rows: 45vh; } Slides & resources https://noti.st/rachelandrew

Slide 19

Slide 19

Slides & resources https://noti.st/rachelandrew

Slide 20

Slide 20

Two-dimensional Grid works in the same way in both axes. Slides & resources https://noti.st/rachelandrew

Slide 21

Slide 21

Inline dimension: the grid fills the grid container Block dimension: as tall as is needed for the content. Slides & resources https://noti.st/rachelandrew

Slide 22

Slide 22

Inline dimension: the grid fills the grid container Block dimension: the grid fills the grid container Slides & resources https://noti.st/rachelandrew

Slide 23

Slide 23

.grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3,100px); gap: 5px; } Slides & resources https://noti.st/rachelandrew

Slide 24

Slide 24

.grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3,100px); gap: 5px; } Slides & resources https://noti.st/rachelandrew

Slide 25

Slide 25

.grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, minmax(100px,auto)); } gap: 5px; Slides & resources https://noti.st/rachelandrew

Slide 26

Slide 26

We have choices now! Enjoy them, they have been a long time coming. Slides & resources https://noti.st/rachelandrew

Slide 27

Slide 27

Slides & resources https://noti.st/rachelandrew

Slide 28

Slide 28

Slides & resources https://noti.st/rachelandrew

Slide 29

Slide 29

Slides & resources https://noti.st/rachelandrew

Slide 30

Slide 30

What can’t we do yet? Slides & resources https://noti.st/rachelandrew

Slide 31

Slide 31

Slides & resources https://noti.st/rachelandrew

Slide 32

Slide 32

figure { display: grid; height: 100%; grid-template-columns: 1fr 3fr; grid-template-rows: 1fr minmax(1em, auto); } Slides & resources https://noti.st/rachelandrew

Slide 33

Slide 33

Only direct children become grid or flex items. Their children return to normal flow. Slides & resources https://noti.st/rachelandrew

Slide 34

Slide 34

Slides & resources https://noti.st/rachelandrew

Slide 35

Slide 35

Slides & resources https://noti.st/rachelandrew

Slide 36

Slide 36

Slides & resources https://noti.st/rachelandrew

Slide 37

Slide 37

1 2 3 4 Slides & resources https://noti.st/rachelandrew

Slide 38

Slide 38

display: contents Removing the box from the layout. Slides & resources https://noti.st/rachelandrew

Slide 39

Slide 39

Slides & resources https://noti.st/rachelandrew

Slide 40

Slide 40

<!—HTML—> <div class=”grid”> <div>Direct Child</div> <div>Direct Child</div> <ul> <li>List Item</li> <li>List Item</li> <li>List Item</li> </ul> <div>Direct Child</div> </div>

Slides & resources https://noti.st/rachelandrew

Slide 41

Slide 41

/* CSS */ .grid { display: grid; grid-template-columns: repeat(3, 1fr); } .grid > * { background-color: rgba(255,255,255,.5); } ul > * { background-color: rgb(209,54,114); } ul { } Slides & resources https://noti.st/rachelandrew

Slide 42

Slide 42

/* CSS */ .grid { display: grid; grid-template-columns: repeat(3, 1fr); } .grid > * { background-color: rgba(255,255,255,.5); } ul > * { background-color: rgb(209,54,114); } ul { } display: contents; Slides & resources https://noti.st/rachelandrew

Slide 43

Slide 43

Slides & resources https://noti.st/rachelandrew

Slide 44

Slide 44

Subgrid Create a grid on a grid item which uses the grid tracks defined on the parent – for rows, columns or both. Slides & resources https://noti.st/rachelandrew

Slide 45

Slide 45

.grid { display: grid; grid-template-columns: repeat(9, 1fr); grid-template-rows: repeat(4, minmax(100px, auto)); } .item { grid-column: 2 / 7; grid-row: 2 / 4; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 80px); } .subitem { grid-column: 2 / 4; grid-row: 1 / 4; } Slides & resources https://noti.st/rachelandrew

Slide 46

Slide 46

Slides & resources https://noti.st/rachelandrew

Slide 47

Slide 47

Slides & resources https://noti.st/rachelandrew

Slide 48

Slide 48

Slides & resources https://noti.st/rachelandrew

Slide 49

Slide 49

.grid { display: grid; grid-template-columns: repeat(9, 1fr); grid-template-rows: repeat(4, minmax(100px, auto)); } .item { grid-column: 2 / 7; grid-row: 2 / 4; display: grid; grid-template-columns: subgrid; grid-template-rows: repeat(3, 80px); } .subitem { grid-column: 3 / 6; grid-row: 1 / 4; } Slides & resources https://noti.st/rachelandrew

Slide 50

Slide 50

.grid { display: grid; grid-template-columns: repeat(9, 1fr); grid-template-rows: repeat(4, minmax(100px, auto)); } .item { grid-column: 2 / 7; grid-row: 2 / 4; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: subgrid; } .subitem { grid-column: 2 / 4; grid-row: 1 / 3; } Slides & resources https://noti.st/rachelandrew

Slide 51

Slide 51

.grid { display: grid; grid-template-columns: repeat(9, 1fr); grid-template-rows: repeat(4, minmax(100px, auto)); } .item { grid-column: 2 / 7; grid-row: 2 / 4; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; } .subitem { grid-column: 3 / 6; grid-row: 1 / 3; } Slides & resources https://noti.st/rachelandrew

Slide 52

Slide 52

Line numbers start from 1 inside the subgrid. You position child items in the subgrid according to the subgrid line numbering, not those of the parent. Slides & resources https://noti.st/rachelandrew

Slide 53

Slide 53

Slides & resources https://noti.st/rachelandrew

Slide 54

Slide 54

Line names on the parent are passed into the subgrid. If you have named lines on the parent grid they will be passed into the subgrid and added to any names defined there. Slides & resources https://noti.st/rachelandrew

Slide 55

Slide 55

col-start col-end col-start col-end Slides & resources https://noti.st/rachelandrew

Slide 56

Slide 56

.grid { display: grid; grid-template-columns:1fr 1fr 1fr [col-start] 1fr 1fr 1fr [col-end] 1fr 1fr 1fr; grid-template-rows: repeat(4, minmax(100px, auto)); } .item { grid-column: 2 / 7; grid-row: 2 / 4; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; } .subitem { grid-column: col-start / col-end; grid-row: 1 / 3; } Slides & resources https://noti.st/rachelandrew

Slide 57

Slide 57

You can add named lines to the subgrid. Line names are added after the subgrid keyword. Slides & resources https://noti.st/rachelandrew

Slide 58

Slide 58

col-end col-start sub-b sub-d Slides & resources https://noti.st/rachelandrew

Slide 59

Slide 59

.grid { display: grid; grid-template-columns: 1fr 1fr 1fr [col-start] 1fr 1fr 1fr [col-end] 1fr 1fr 1fr; grid-template-rows: repeat(4, minmax(100px, auto)); } .item { grid-column: 2 / 7; grid-row: 2 / 4; display: grid; grid-template-columns: subgrid [sub-a] [sub-b] [sub-c] [sub-d] [sub-e] [sub-f]; grid-template-rows: subgrid; } .subitem { grid-column: col-start / col-end; grid-row: 1 / 3; } .subitem { grid-column: sub-b / sub-d; grid-row: 1 / 3; } Slides & resources https://noti.st/rachelandrew

Slide 60

Slide 60

The subgrid inherits the gaps from the parent. Slides & resources https://noti.st/rachelandrew

Slide 61

Slide 61

Slides & resources https://noti.st/rachelandrew

Slide 62

Slide 62

You can change the gaps on the subgrid. Slides & resources https://noti.st/rachelandrew

Slide 63

Slide 63

Slides & resources https://noti.st/rachelandrew

Slide 64

Slide 64

Sizing of items in the subgrid can change the size of the parent tracks. Slides & resources https://noti.st/rachelandrew

Slide 65

Slide 65

Slides & resources https://noti.st/rachelandrew

Slide 66

Slide 66

Now the bad news There are currently no browser implementations of subgrid. Slides & resources https://noti.st/rachelandrew

Slide 67

Slide 67

Slides & resources https://noti.st/rachelandrew

Slide 68

Slide 68

Slightly better news Firefox are implementing subgrid as we speak! Slides & resources https://noti.st/rachelandrew

Slide 69

Slide 69

Fewer rendering engines fewer places where new ground can be broken. Slides & resources https://noti.st/rachelandrew

Slide 70

Slide 70

Tell browsers what you want in the platform. Slides & resources https://noti.st/rachelandrew

Slide 71

Slide 71

Slides & resources https://noti.st/rachelandrew

Slide 72

Slide 72

https://bugs.chromium.org/p/chromium/issues/detail?id=618969 Slides & resources https://noti.st/rachelandrew

Slide 73

Slide 73

Slides & resources https://noti.st/rachelandrew

Slide 74

Slide 74

https://bugzilla.mozilla.org/show_bug.cgi?id=1240834 Slides & resources https://noti.st/rachelandrew

Slide 75

Slide 75

Slides & resources https://noti.st/rachelandrew

Slide 76

Slide 76

https://wpdev.uservoice.com/forums/257854-microsoft-edgedeveloper/suggestions/20447239-implement-subgrid Slides & resources https://noti.st/rachelandrew

Slide 77

Slide 77

Write about features you want to see in browsers Write up your use cases, the problems having the feature will solve. Slides & resources https://noti.st/rachelandrew

Slide 78

Slide 78

Use new features Browsers are watching. Slides & resources https://noti.st/rachelandrew

Slide 79

Slide 79

Slides & resources https://noti.st/rachelandrew

Slide 80

Slide 80

Use new features when they are behind a flag You get to beta test the web platform! Slides & resources https://noti.st/rachelandrew

Slide 81

Slide 81

Give feedback to the CSS Working Group https://github.com/w3c/csswg-drafts/issues Slides & resources https://noti.st/rachelandrew

Slide 82

Slide 82

Slides & resources https://noti.st/rachelandrew

Slide 83

Slide 83

Participate in the web platform Or you are leaving your future as a designer or developer in the hands of the very few who do. Slides & resources https://noti.st/rachelandrew

Slide 84

Slide 84

Thank you @rachelandrew Slides & resources https://noti.st/rachelandrew