Modern CSS Layout is Awesome!

Slide 1

Slide 2

Slide 3

🙂 Hard Easy

Slide 4

Hard 🙂 🤯 Easy CSS can do THAT?!!

Slide 5

Modern CSS Layout is Awesome!* *(I promise)

Slide 6

Aspect-ratio

Slide 7

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 8

.item { aspect-ratio: 1; } codepen.io/michellebarker/pen/bGLpOZz

Slide 9

img { display: block; width: 100%; height: 100%; object-fit: cover; } codepen.io/michellebarker/pen/bGLpOZz

Slide 10

img { display: block; width: 100%; height: 100%; object-fit: contain; } codepen.io/michellebarker/pen/QWQqggO

Slide 11

Slide 12

Slide 13

codepen.io/michellebarker/pen/YzeqRrP

Slide 14

3 2 codepen.io/michellebarker/pen/YzeqRrP

Slide 15

Flex gap

Slide 16

The problem

Slide 17

The problem

Slide 18

The problem

Slide 19

The solution ul { gap: 1em 0.5em; }

Slide 20

New and improved viewport units

Slide 21

The problem

Slide 22

The problem

Slide 23

The solution 100svh 100svh

Slide 24

The solution 100lvh 100lvh

Slide 25

The solution 100dvh 100dvh

Slide 26

Overlaying elements (Putting things on top of each other)

Slide 27

figcaption { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }

Slide 28

figcaption { position: absolute; inset: 0; }

Slide 29

figcaption { position: absolute; inset: 50% 50% 0 0; }

Slide 30

figcaption { position: absolute; inset-block: 50px; }

Slide 31

figcaption { position: absolute; inset-inline: 50px; }

Slide 32

figure { display: grid; } figure > * { grid-area: 1 / 1; }

Slide 33

fi Intrinsic sizing min-content max-content t-content

Slide 34

Subgrid

Slide 35

Slide 36

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

Slide 37

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

Slide 38

No subgrid? No problem!

Slide 39

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

Slide 40

Slide 41

Slide 42

Slide 43

Slide 44

figure { display: grid; grid-template: subgrid / subgrid; }

Slide 45

img { grid-column: 1 / span 3; grid-row: 1 / span 2; }

Slide 46

figcaption { grid-column: 4 / span 2; grid-row: 2; }

Slide 47

Responsive layouts

Slide 48

Slide 49

Slide 50

Demo

Slide 51

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 52

Browser support

Slide 53

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

Slide 54

:has()

Slide 55

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

Slide 56

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

Animated grid tracks

Slide 58

Slide 59

.grid:has(> :nth-child(3n):hover) { grid-template-columns: 1fr 1fr 2fr; }

Slide 60

Slide 61

Slide 62

Demo

Slide 63

💖 Thank you Website: css-irl.info Mastodon: @michelle@front-end.social