Hello, subgrid @rachelandrew at Fronteers June 2019 meetup Slides & resources https://noti.st/rachelandrew
Slide 1
Slide 2
CSS Grid Layout Two years on. Slides & resources https://noti.st/rachelandrew
Slide 3
So, what’s next? Slides & resources https://noti.st/rachelandrew
Slide 4
Slides & resources https://noti.st/rachelandrew
Slide 5
Slides & resources https://noti.st/rachelandrew
Slide 6
Only direct children become grid or flex items. Their children return to normal flow. Slides & resources https://noti.st/rachelandrew
Slide 7
Slides & resources https://noti.st/rachelandrew
Slide 8
Slides & resources https://noti.st/rachelandrew
Slide 9
display: contents Removing the box from the layout. Slides & resources https://noti.st/rachelandrew
Slide 10
Slides & resources https://noti.st/rachelandrew
Slide 11
<!—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 12
/* 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 13
/* 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 14
Slides & resources https://noti.st/rachelandrew
Slide 15
Slides & resources https://noti.st/rachelandrew
Slide 16
Slides & resources https://noti.st/rachelandrew
Slide 17
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 18
.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 19
Slides & resources https://noti.st/rachelandrew
Slide 20
Slides & resources https://noti.st/rachelandrew
Slide 21
Slides & resources https://noti.st/rachelandrew
Slide 22
.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 23
.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 24
.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 25
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 26
Slides & resources https://noti.st/rachelandrew
Slide 27
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 28
col-start col-end col-start col-end Slides & resources https://noti.st/rachelandrew
Slide 29
.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 30
You can add named lines to the subgrid. Line names are added after the subgrid keyword. Slides & resources https://noti.st/rachelandrew
Slide 31
grid-template-columns: subgrid [sub-a] [sub-b]; Slides & resources https://noti.st/rachelandrew
Slide 32
col-end col-start sub-b sub-d Slides & resources https://noti.st/rachelandrew
Slide 33
.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
Slide 34
The subgrid inherits the gaps from the parent. Slides & resources https://noti.st/rachelandrew
Slide 35
Slides & resources https://noti.st/rachelandrew
Slide 36
You can change the gaps on the subgrid. Slides & resources https://noti.st/rachelandrew
Slide 37
Slides & resources https://noti.st/rachelandrew
Slide 38
Sizing of items in the subgrid can change the size of the parent tracks. Slides & resources https://noti.st/rachelandrew
Slide 39
Slides & resources https://noti.st/rachelandrew
Slide 40
Subgrid enables some previously difficult patterns. Slides & resources https://noti.st/rachelandrew
Slide 41
Slides & resources https://noti.st/rachelandrew
Slide 42
.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
Slide 43
Line -1 is the end line of the explicit grid. Slides & resources https://noti.st/rachelandrew
Slide 44
Slides & resources https://noti.st/rachelandrew
Slide 45
.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
Slide 46
We can’t target the end line of the implicit grid. Slides & resources https://noti.st/rachelandrew
Slide 47
Place the items in a container which uses a subgrid for columns. Slides & resources https://noti.st/rachelandrew
Slide 48
Slides & resources https://noti.st/rachelandrew
Slide 49
.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
Slide 50
Now the bad news There are currently no shipped implementations of subgrid. Slides & resources https://noti.st/rachelandrew
Slide 51
Slides & resources https://noti.st/rachelandrew
Slide 52
Slightly better news Firefox have shipped subgrid in Nightly! Slides & resources https://noti.st/rachelandrew
Slide 53
Slides & resources https://noti.st/rachelandrew
Slide 54
Slides & resources https://noti.st/rachelandrew
Slide 55
Fewer rendering engines fewer places where new ground can be broken. Slides & resources https://noti.st/rachelandrew
Slide 56
Tell browsers what you want in the platform. Slides & resources https://noti.st/rachelandrew
Slide 57
Slides & resources https://noti.st/rachelandrew
Slide 58
https://bugs.chromium.org/p/chromium/issues/detail?id=618969 Slides & resources https://noti.st/rachelandrew
Slide 59
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 60
Use new features Browsers are watching. Slides & resources https://noti.st/rachelandrew
Slide 61
Slides & resources https://noti.st/rachelandrew
Slide 62
Use new features when they are behind a flag You get to beta test the web platform! Slides & resources https://noti.st/rachelandrew
Slide 63
Give feedback to the CSS Working Group https://github.com/w3c/csswg-drafts/issues Slides & resources https://noti.st/rachelandrew
Slide 64
Slides & resources https://noti.st/rachelandrew
Slide 65
Or, talk to me It’s what I’m here for! Slides & resources https://noti.st/rachelandrew
Slide 66
Thank you https://noti.st/rachelandrew/WH5GiQ/hello-subgrid Slides & resources https://noti.st/rachelandrew
