Responsive patterns with subgrid

A presentation at Web Directions Hover in April 2022 in by Rachel Andrew

Slide 1

Responsive patterns with subgrid @rachelandrew Slides & resources https://noti.st/rachelandrew

Slide 2

grid-template-rows: subgrid; grid-template-columns: subgrid; Slides & resources https://noti.st/rachelandrew

Slide 3

April 30, 2022 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

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 10

.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 11

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

Slide 12

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

Slide 13

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

Slide 14

.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 15

.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 16

.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 17

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 18

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

Slide 19

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 20

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

Slide 21

.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 22

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

Slide 23

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

Slide 24

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

Slide 25

.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 26

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

Slide 27

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

Slide 28

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

Slide 29

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

Slide 30

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

Slide 31

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

Slide 32

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

Slide 33

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

Slide 34

.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 35

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

Slide 36

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

Slide 37

.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 38

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

Slide 39

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

Slide 40

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

Slide 41

.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 42

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

Slide 43

.grid { display: grid; grid-template-columns: [full-start] minmax(1em, 1fr) [main-start] minmax(0, 40em) [main-end] minmax(1em, 1fr) [full-end]; } .grid > * { grid-column: main ; } .grid > .full { grid-column: full; display: grid; grid-template-columns: subgrid; } .center { grid-column: main; } Slides & resources https://noti.st/rachelandrew

Slide 44

The future Container Queries and subgrid? Slides & resources https://noti.st/rachelandrew

Slide 45

@container grid (min-width: 600px) { .item { display: grid; grid-template-columns: subgrid; } } Slides & resources https://noti.st/rachelandrew

Slide 46

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