CSS Layout from the inside out Rachel Andrew, State of the Browser, October, 2021
Slide 1
Slide 2
The Holy Grail
Slide 3
The Holy Grail
Slide 4
target / context = result Fluid Grids, Ethan Marcotte, A List Apart, 2009.
Slide 5
Slide 6
A float-based grid Size things with % and push them around to look like a grid.
Slide 7
.box { float: left; } .a { width: 25%; } .b { width: 16.66%; } .c {width: 33.33%; }
Slide 8
The biggest problems in (float-based) web design? Clearing floats and getting equal height columns.
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
.wrapper { display: flex; } .box { flex: none; } .a { width: 25%; } .b { width: 16.66%; } .c {width: 33.33%; }
Slide 11
The biggest problem in (flex-based) web design? Flexbox being weird and hard.
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
Has grid made flexbox redundant?
Slide 14
Slide 15
Slide 16
Slide 17
Slide 18
.grid { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); }
Slide 19
Slide 20
minmax(0,1fr)
Slide 21
Slide 22
minmax(auto,1fr)
Slide 23
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
Aspect Ratios
Slide 26
The “padding hack” https://css-tricks.com/aspect-ratio-boxes/
Slide 27
aspect-ratio: 16/9;
Slide 28
Slide 29
.wrapper { display: grid; grid-template-columns: 200px 350px; } .box16x9 { aspect-ratio: 16/9; } .box4x3 { aspect-ratio: 4/3; }
Slide 30
Slide 31
1fr 1fr 1fr
Slide 32
CSS Containment This box and children are independent from the rest of the layout.
Slide 33
.sidebar { contain: layout; }
Slide 34
Container Queries Design components that can react to the available space in their container.
Slide 35
Slide 36
Try out Container Queries In chrome://flags enable “CSS Container Queries”.
Slide 37
.sidebar { container-type: inline-size; }
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
.sidebar { container-type: inline-size; container-name: sidebar; }
Slide 40
@container (min-width: 400px) { .card { display: grid; grid-template-columns: 1fr 2fr; } }
Slide 41
@container sidebar (min-width: 400px) { .card { display: grid; grid-template-columns: 1fr 2fr; } }
Slide 42
Slide 43
.wrapper > div { container-type: inline-size; } @container (min-width: 220px) { .box { background-color: var(—blue-sapphire); } }
Slide 44
.fig-panel { display: grid; grid-template-columns: 1fr 1fr; }
Slide 45
@container (min-width: 700px) { grid-template-columns: repeat(3,1fr); }
Slide 46
This seems so simple! Why did it take so long?
Slide 47
Slide 48
.sidebar { container: inline-size / sidebar; }
Slide 49
.feature { container-type: block-size; container-name: feature; }
Slide 50
Slide 51
Slide 52
Container Queries are coming But they probably aren’t the solution to all your problems.
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
Use intrinsic and range sizing methods with grid minmax(), min-content, max-content, auto, and fit-content()
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
Thank you! Find me @rachelandrew Slides at: https://noti.st/rachelandrew
