Creative CSS Layout

Slide 1

Modern CSS Layout

Slide 2

💖 Drums 💖 CSS 💖 Windmills

Slide 3

css-irl.info

Slide 4

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

“ Intrinsic web design Jen Simmons ”

Slide 7

Flex or Grid?

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 10

Slide 11

centred

Slide 12

Flexbox

Slide 13

Grid 1fr auto 1fr

Slide 14

Flexbox

Slide 15

codepen.io/michellebarker/pen/qBxNWZP

Slide 16

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

Slide 17

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

Slide 18

codepen.io/michellebarker/pen/qBxNWZP

Slide 19

Aspect-ratio

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

Demo codepen.io/michellebarker/pen/ExEzvBx

Slide 22

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

Slide 23

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

Slide 24

Demo codepen.io/michellebarker/pen/ExEzvBx

Slide 25

Size Viewport width

Slide 26

utopia.fyi

Slide 27

Flex or Grid?

Slide 28

Slide 29

Demo codepen.io/michellebarker/pen/poVvabe

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

Browser support

Slide 32

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

Slide 33

Subgrid

Slide 34

Slide 35

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

Slide 36

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

Slide 37

No subgrid? No problem!

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

:has() (the parent selector)

Slide 40

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

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

Demo codepen.io/michellebarker/pen/poVvabe

Slide 43

wpt.fyi/interop-2022

Slide 44

🥰 Thank you @MicheBarks / @CSSInRealLife