A presentation at develop.BBC by Rachel Andrew
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
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
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
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
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
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
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
We have had Grid Layout in browsers for two years. Long enough for us to start to find the edges, and discover things we really wish it could do. The biggest missing feature from Level 1 was subgrid, which has become the main feature for Level 2 of the specification. In this talk I’ll introduce subgrid, with use cases, example code and some thoughts on where we might see Grid going in the future.
The following resources were mentioned during the presentation or are useful additional information.
The following code examples from the presentation can be tried out live.
