Creative CSS Layout

A presentation at State of the browser in October 2022 in London, UK by Michelle Barker

Slide 1

Slide 1

Modern CSS Layout

Slide 2

Slide 2

💖 Drums 💖 CSS 💖 Windmills

Slide 3

Slide 3

css-irl.info

Slide 4

Slide 4

Slide 5

Slide 5

Multi-column Flexbox Custom properties Container queries aspect-ratio min() / max() / clamp() Grid :has() Logical properties Viewport units Subgrid Writing modes

Slide 6

Slide 6

“ Intrinsic web design Jen Simmons ”

Slide 7

Slide 7

Flex or Grid?

Slide 8

Slide 8

Flexbox One dimension Flexible layout Two dimensions Strict alignment Gap support Layout based on content Layout based on context Grid

Slide 9

Slide 9

Slide 10

Slide 10

Slide 11

Slide 11

centred

Slide 12

Slide 12

Flexbox

Slide 13

Slide 13

Grid 1fr auto 1fr

Slide 14

Slide 14

Flexbox

Slide 15

Slide 15

codepen.io/michellebarker/pen/qBxNWZP

Slide 16

Slide 16

grid-template-columns: 1fr repeat(10, minmax(0, 6rem)) 1fr; codepen.io/michellebarker/pen/qBxNWZP

Slide 17

Slide 17

grid-template-columns: 1fr repeat(10, minmax(0, 6rem)) 1fr; codepen.io/michellebarker/pen/qBxNWZP

Slide 18

Slide 18

codepen.io/michellebarker/pen/qBxNWZP

Slide 19

Slide 19

Aspect-ratio

Slide 20

Slide 20

Before ☹ .aspect-box { position: relative; } .aspect-box::before { display: block; content: ”; width: 100%; padding-bottom: calc(100% / (var(—-aspect-ratio, 3 / 2))); } .aspect-box > :first-child { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } After ☺ .aspect-box { aspect-ratio: 3 / 2; }

Slide 21

Slide 21

Demo codepen.io/michellebarker/pen/ExEzvBx

Slide 22

Slide 22

min, max and clamp min(1rem, 2vw) max(1rem, 2vw)

Slide 23

Slide 23

min, max and clamp clamp(1rem, 2vw, 3rem)

Slide 24

Slide 24

Demo codepen.io/michellebarker/pen/ExEzvBx

Slide 25

Slide 25

Size Viewport width

Slide 26

Slide 26

utopia.fyi

Slide 27

Slide 27

Flex or Grid?

Slide 28

Slide 28

Slide 29

Slide 29

Demo codepen.io/michellebarker/pen/poVvabe

Slide 30

Slide 30

Container-relative units cqw query container width cqh query container height cqi query container inline size cqb query container block size cqmin smallest of ‘cqi’ or ‘cqb’ cqmax largest of ‘cqi’ or ‘cqb’

Slide 31

Slide 31

Browser support

Slide 32

Slide 32

container-query-poly ll fi fi github.com/GoogleChromeLabs/container-query-poly ll

Slide 33

Slide 33

Subgrid

Slide 34

Slide 34

Slide 35

Slide 35

.card { grid-row: span 3; display: grid; gap: 0; grid-template-rows: subgrid; }

Slide 36

Slide 36

.card { grid-row: span 3; display: grid; gap: 0; grid-template-rows: subgrid; }

Slide 37

Slide 37

No subgrid? No problem!

Slide 38

Slide 38

.card { /* Code for browsers without subgrid / } @supports (grid-template-columns: subgrid) { .card { grid-template-rows: subgrid; / Code for browsers that support subgrid */ } }

Slide 39

Slide 39

:has() (the parent selector)

Slide 40

Slide 40

.component blockquote { grid-column: 2 / span 4; grid-row: 2 / span 2; text-align: center; }

Slide 41

Slide 41

.component:has(img) img { grid-row: 1 / span 2; grid-column: 1 / span 3; } .component:has(img) blockquote { grid-row: 2 / span 2; grid-column: 3 / span 4; text-align: left; }

Slide 42

Slide 42

Demo codepen.io/michellebarker/pen/poVvabe

Slide 43

Slide 43

wpt.fyi/interop-2022

Slide 44

Slide 44

🥰 Thank you @MicheBarks / @CSSInRealLife