CSS Layout from the inside out Rachel Andrew, FITC, 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: 225px; } .b { width: 150px; } .c {width: 300px; }
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: 225px; } .b { width: 150px; } .c {width: 300px; }
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
CSS Containment This box and children are independent from the rest of the layout.
Slide 31
.sidebar { contain: layout; }
Slide 32
Container Queries Design components that can react to the available space in their container.
Slide 33
Try out Container Queries In chrome://flags enable “CSS Container Queries”.
Slide 34
.sidebar { container-type: inline-size; }
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
.sidebar { container-type: inline-size; container-name: sidebar; }
Slide 37
@container (min-width: 400px) { .card { display: grid; grid-template-columns: 1fr 2fr; } }
Slide 38
@container sidebar (min-width: 400px) { .card { display: grid; grid-template-columns: 1fr 2fr; } }
Slide 39
Slide 40
.wrapper > div { container-type: inline-size; } @container (min-width: 220px) { .box { background-color: var(—blue-sapphire); } }
Slide 41
This seems so simple! Why did it take so long?
Slide 42
Slide 43
.sidebar { container: inline-size / sidebar; }
Slide 44
.feature { container-type: block-size; container-name: feature; }
Slide 45
Slide 46
Slide 47
Container Queries are coming But they probably aren’t the solution to all your problems.
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
Use intrinsic and range sizing methods with grid minmax(), min-content, max-content, auto, and fit-content()
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
Thank you! Find me @rachelandrew Slides at: https://noti.st/rachelandrew
