CSS layout from the inside out

A presentation at Web Unleashed in October 2021 in by Rachel Andrew

Slide 1

Slide 1

CSS Layout from the inside out Rachel Andrew, FITC, 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: 225px; } .b { width: 150px; } .c {width: 300px; }

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: 225px; } .b { width: 150px; } .c {width: 300px; }

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

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

Slide 31

Slide 31

.sidebar { contain: layout; }

Slide 32

Slide 32

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

Slide 33

Slide 33

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

Slide 34

Slide 34

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

Slide 35

Slide 35

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 36

Slide 36

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

Slide 37

Slide 37

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

Slide 38

Slide 38

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

Slide 39

Slide 39

Slide 40

Slide 40

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

Slide 41

Slide 41

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

Slide 42

Slide 42

Slide 43

Slide 43

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

Slide 44

Slide 44

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

Slide 45

Slide 45

Slide 46

Slide 46

Slide 47

Slide 47

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

Slide 48

Slide 48

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 49

Slide 49

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

Slide 50

Slide 50

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 51

Slide 51

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