CSS layout from the inside out

A presentation at State of the Browser in October 2021 in London, UK by Rachel Andrew

Slide 1

Slide 1

CSS Layout from the inside out Rachel Andrew, State of the Browser, October, 2021

Slide 2

Slide 2

The Holy Grail

Slide 3

Slide 3

The Holy Grail

Slide 4

Slide 4

target / context = result Fluid Grids, Ethan Marcotte, A List Apart, 2009.

Slide 5

Slide 5

Slide 6

Slide 6

A float-based grid Size things with % and push them around to look like a grid.

Slide 7

Slide 7

.box { float: left; } .a { width: 25%; } .b { width: 16.66%; } .c {width: 33.33%; }

Slide 8

Slide 8

The biggest problems in (float-based) web design? Clearing floats and getting equal height columns.

Slide 9

Slide 9

A flex-based grid Size things with % and push them around to look like a grid (but with equal height columns)

Slide 10

Slide 10

.wrapper { display: flex; } .box { flex: none; } .a { width: 25%; } .b { width: 16.66%; } .c {width: 33.33%; }

Slide 11

Slide 11

The biggest problem in (flex-based) web design? Flexbox being weird and hard.

Slide 12

Slide 12

.wrapper { display: grid; grid-template-columns: repeat(12,minmax(0,1fr); } .a { grid-column: auto / span 3; } .b { grid-column: auto / span 2; } .c {grid-column: auto / span 4; }

Slide 13

Slide 13

Has grid made flexbox redundant?

Slide 14

Slide 14

Slide 15

Slide 15

Slide 16

Slide 16

Slide 17

Slide 17

Slide 18

Slide 18

.grid { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); }

Slide 19

Slide 19

Slide 20

Slide 20

minmax(0,1fr)

Slide 21

Slide 21

Slide 22

Slide 22

minmax(auto,1fr)

Slide 23

Slide 23

Slide 24

Slide 24

h1 { display: grid; grid-template-columns: 1fr auto 1fr; } h1::before, h1::after { content: “”; border-top: 1px solid var(—charcoal); align-self: center; }

Slide 25

Slide 25

Aspect Ratios

Slide 26

Slide 26

The “padding hack” https://css-tricks.com/aspect-ratio-boxes/

Slide 27

Slide 27

aspect-ratio: 16/9;

Slide 28

Slide 28

Slide 29

Slide 29

.wrapper { display: grid; grid-template-columns: 200px 350px; } .box16x9 { aspect-ratio: 16/9; } .box4x3 { aspect-ratio: 4/3; }

Slide 30

Slide 30

Slide 31

Slide 31

1fr 1fr 1fr

Slide 32

Slide 32

CSS Containment This box and children are independent from the rest of the layout.

Slide 33

Slide 33

.sidebar { contain: layout; }

Slide 34

Slide 34

Container Queries Design components that can react to the available space in their container.

Slide 35

Slide 35

Slide 36

Slide 36

Try out Container Queries In chrome://flags enable “CSS Container Queries”.

Slide 37

Slide 37

.sidebar { container-type: inline-size; }

Slide 38

Slide 38

Using container-type creates a containment context. This also turns on layout, style, and inline-size containment, in the same way as using the contain property does.

Slide 39

Slide 39

.sidebar { container-type: inline-size; container-name: sidebar; }

Slide 40

Slide 40

@container (min-width: 400px) { .card { display: grid; grid-template-columns: 1fr 2fr; } }

Slide 41

Slide 41

@container sidebar (min-width: 400px) { .card { display: grid; grid-template-columns: 1fr 2fr; } }

Slide 42

Slide 42

Slide 43

Slide 43

.wrapper > div { container-type: inline-size; } @container (min-width: 220px) { .box { background-color: var(—blue-sapphire); } }

Slide 44

Slide 44

.fig-panel { display: grid; grid-template-columns: 1fr 1fr; }

Slide 45

Slide 45

@container (min-width: 700px) { grid-template-columns: repeat(3,1fr); }

Slide 46

Slide 46

This seems so simple! Why did it take so long?

Slide 47

Slide 47

Slide 48

Slide 48

.sidebar { container: inline-size / sidebar; }

Slide 49

Slide 49

.feature { container-type: block-size; container-name: feature; }

Slide 50

Slide 50

Slide 51

Slide 51

Slide 52

Slide 52

Container Queries are coming But they probably aren’t the solution to all your problems.

Slide 53

Slide 53

Remember than flexbox is designed for flexible things A bunch of different sized items, within an unknown container size, dealt with as a group.

Slide 54

Slide 54

Use intrinsic and range sizing methods with grid minmax(), min-content, max-content, auto, and fit-content()

Slide 55

Slide 55

But, do get excited for Container Queries! Try it out! If you spot any issues or think of a potential enhancement, let the CSS Working Group know:

Slide 56

Slide 56

Thank you! Find me @rachelandrew Slides at: https://noti.st/rachelandrew