CSS layout from the inside out
A presentation at State of the Browser in in London, UK by Rachel Andrew
CSS Layout from the inside out Rachel Andrew, State of the Browser, October, 2021
The Holy Grail
The Holy Grail
target / context = result Fluid Grids, Ethan Marcotte, A List Apart, 2009.
A float-based grid Size things with % and push them around to look like a grid.
.box { float: left; } .a { width: 25%; } .b { width: 16.66%; } .c {width: 33.33%; }
The biggest problems in (float-based) web design? Clearing floats and getting equal height columns.
A flex-based grid Size things with % and push them around to look like a grid (but with equal height columns)
.wrapper { display: flex; } .box { flex: none; } .a { width: 25%; } .b { width: 16.66%; } .c {width: 33.33%; }
The biggest problem in (flex-based) web design? Flexbox being weird and hard.
.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; }
Has grid made flexbox redundant?
.grid { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); }
minmax(0,1fr)
minmax(auto,1fr)
h1 { display: grid; grid-template-columns: 1fr auto 1fr; } h1::before, h1::after { content: “”; border-top: 1px solid var(—charcoal); align-self: center; }
Aspect Ratios
The “padding hack” https://css-tricks.com/aspect-ratio-boxes/
aspect-ratio: 16/9;
.wrapper { display: grid; grid-template-columns: 200px 350px; } .box16x9 { aspect-ratio: 16/9; } .box4x3 { aspect-ratio: 4/3; }
1fr 1fr 1fr
CSS Containment This box and children are independent from the rest of the layout.
.sidebar { contain: layout; }
Container Queries Design components that can react to the available space in their container.
Try out Container Queries In chrome://flags enable “CSS Container Queries”.
.sidebar { container-type: inline-size; }
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.
.sidebar { container-type: inline-size; container-name: sidebar; }
@container (min-width: 400px) { .card { display: grid; grid-template-columns: 1fr 2fr; } }
@container sidebar (min-width: 400px) { .card { display: grid; grid-template-columns: 1fr 2fr; } }
.wrapper > div { container-type: inline-size; } @container (min-width: 220px) { .box { background-color: var(—blue-sapphire); } }
.fig-panel { display: grid; grid-template-columns: 1fr 1fr; }
@container (min-width: 700px) { grid-template-columns: repeat(3,1fr); }
This seems so simple! Why did it take so long?
.sidebar { container: inline-size / sidebar; }
.feature { container-type: block-size; container-name: feature; }
Container Queries are coming But they probably aren’t the solution to all your problems.
Remember than flexbox is designed for flexible things A bunch of different sized items, within an unknown container size, dealt with as a group.
Use intrinsic and range sizing methods with grid minmax(), min-content, max-content, auto, and fit-content()
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:
Thank you! Find me @rachelandrew Slides at: https://noti.st/rachelandrew
We spent years trying to get floats to give us a 12-column grid. Then flexbox came along, and it was better at making a 12-column grid. Then grid layout landed, and we celebrated by making a 12-column grid in two lines of code. However, if we stop there, we miss out on much that these new layout methods have to offer.
In this talk, discover how CSS is evolving to allow components to react to their content and immediate location in a document. We’ll look at tools you can use right now and take a compelling look at what is just around the corner with container queries.
Video
Code
The following code examples from the presentation can be tried out live.
Resources
The following resources were mentioned during the presentation or are useful additional information.
