Hello subgrid!

Hello, subgrid @rachelandrew Slides & resources https://noti.st/rachelandrew

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. Slides & resources https://noti.st/rachelandrew

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

So, what’s next? Slides & resources https://noti.st/rachelandrew

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

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

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

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

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

<!—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

/* 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

/* 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

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

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

.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

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

.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

.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

.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

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

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

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

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

.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

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

grid-template-columns: subgrid [sub-a] [sub-b]; Slides & resources https://noti.st/rachelandrew

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

.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; } .subitem2 { grid-column: sub-b / sub-d; grid-row: 1 / 3; } Slides & resources https://noti.st/rachelandrew

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

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

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

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

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

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

Subgrid enables some previously difficult patterns. Slides & resources https://noti.st/rachelandrew

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

.wrapper { display: grid; gap: 10px; grid-template-columns: repeat(5, 1fr); /* 5 explicit rows */ grid-template-rows: repeat(5, minmax(100px, auto)); } .fullheight { background-color: rgb(209,54,114); grid-row: 1 / -1; } Slides & resources https://noti.st/rachelandrew

Line -1 is the end line of the explicit grid. Slides & resources https://noti.st/rachelandrew

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

.wrapper { display: grid; gap: 10px; grid-template-columns: repeat(5, 1fr); /* no defined explicit rows */ grid-auto-rows: minmax(100px, auto); } .fullheight { background-color: rgb(209,54,114); grid-row: 1 / -1; } Slides & resources https://noti.st/rachelandrew

We can’t target the end line of the implicit grid. Slides & resources https://noti.st/rachelandrew

Place the items in a container which uses a subgrid for columns. Slides & resources https://noti.st/rachelandrew

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

.wrapper { display: grid; gap: 10px; grid-template-columns: repeat(5, 1fr); /* no defined explicit rows */ grid-auto-rows: minmax(100px, auto); } .items { grid-column: 2 / -1; display: grid; grid-template-columns: subgrid; grid-auto-rows: minmax(100px, auto); } .fullheight { background-color: rgb(209,54,114); grid-row: 1 / -1; } Slides & resources https://noti.st/rachelandrew

Now the bad news Currently subgrid is only available in Firefox. Slides & resources https://noti.st/rachelandrew

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

Subgrid as a progressive enhancement Slides & resources https://noti.st/rachelandrew

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

@supports (grid-template-rows: subgrid) { .card { display: grid; grid-row: auto / span 3; grid-template-rows: subgrid; } } Slides & resources https://noti.st/rachelandrew

Do look at subgrid and other emerging features Slides & resources https://noti.st/rachelandrew

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

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

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

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

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

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

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

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

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

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

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

Hello subgrid!

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

Slide 10

Slide 11

Slide 12

Slide 13

Slide 14

Slide 15

Slide 16

Slide 17

Slide 18

Slide 19

Slide 20

Slide 21

Slide 22

Slide 23

Slide 24

Slide 25

Slide 26

Slide 27

Slide 28

Slide 29

Slide 30

Slide 31

Slide 32

Slide 33

Slide 34

Slide 35

Slide 36

Slide 37

Slide 38

Slide 39

Slide 40

Slide 41

Slide 42

Slide 43

Slide 44

Slide 45

Slide 46

Slide 47

Slide 48

Slide 49

Slide 50

Slide 51

Slide 52

Slide 53

Slide 54

Slide 55

Slide 56

Slide 57

Slide 58

Slide 59

Slide 60

Slide 61

Slide 62

Slide 63

Slide 64

Slide 65

Slide 66

Slide 67

Slide 68