Modern CSS Layout is Awesome! (2024 edition)

Modern CSS Layout is Awesome!

Senior Front End Developer at

💖 The web’s most beautiful language

css-irl.info

🤕 fi Tables Floats Clear xes

🤕 fi Tables Floats Clear xes 🙂 Flexbox Grid Multi-column Viewport units Custom properties

“Material honesty” Jeremy Keith (Resilient Web Design)

🤕 fi Tables Floats Clear xes 🙂 Flexbox Grid Multi-column Viewport units 🤯 min(), max(), clamp() Logical properties and values Container queries Subgrid :has() Intrinsic sizing…

It’s time to re-learn CSS layout!

“Be the browser’s mentor, not its micromanager” Andy Bell

You might have missed…

Aspect-ratio

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; }

codepen.io/michellebarker/pen/bGLpzjd

Flex gap

The problem

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

New and improved viewport units

The problem

The solution 100svh 100svh

The solution 100lvh 100lvh

The solution 100dvh 100dvh

Overlaying elements (Putting things on top of each other)

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

figcaption { position: absolute; inset: 0; }

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

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

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

figcaption { position: absolute; inset: auto -2rem -2rem auto; }

figure { display: grid;

{ grid area: 1 / 1; } }

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

div { width: 300px; }

div { width: min content; }

div { width: max content; }

i div { width: f t content; }

Subgrid

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

Responsive layouts

i

.card grid { display: grid; gap: 1rem; grid template columns: repeat(auto f ll, minmax(18rem, 1fr)); }

i

.card grid { display: grid; gap: 1rem; grid template columns: repeat(auto f ll, minmax(min(18rem, 100%), 1fr)); }

Container queries

main, aside { container: layout / inline size; }

@container layout (inline size > 700px) { .card grid { grid template columns: repeat(2, 1fr); } }

@container layout (inline size > 1200px) { .card grid { grid template columns: repeat(3, 1fr); } }

li { container: card / inline size; }

@container card (inline size > 450px) { .card { display: grid; grid template columns: 1fr 1fr; } }

@container layout (inline size > 1200px) { .card grid:has(> :last child:nth child(3n - 2)) > :f rst child { grid column: span 3; }

i

}

.card content { padding: clamp(1rem, 5cqi, 3rem); font size: clamp(1rem, 2.5cqi, 1.6rem);

_ _ }

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’

Browser support

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

codepen.io/michellebarker/pen/yLxKPYW

utopia.fyi

:has()

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

.grid:has(img) img { grid-row: 1 / span 2; grid-column: 1 / span 3; } .grid:has(img) blockquote { grid-row: 2 / span 2; grid-column: 3 / span 4; text-align: left; }

Anchor positioning

/ < . . . / < / <

<div class=”wrapper”> <button> button> <div class=”tooltip”> … div> div>

/ < . . . / < .wrapper { position: relative; } / <

<div class=”wrapper”> <button> button> <div class=”tooltip”> … div> div>

/ < . . . / < .tooltip { position: absolute; } / <

<div class=”wrapper”> <button> button> <div class=”tooltip”> … div> div>

Anchor Any other element

Anchor

button { anchor name: } anchor_1;

.tooltip { position: absolute; position anchor: anchor_1; }

button { anchor name: } anchor_1;

.tooltip cite { position: absolute; position anchor: anchor_1; inset }

button { anchor name: } anchor_1;

.tooltip { position: absolute; top: anchor( anchor_1 bottom); right: anchor( anchor_1 right); }

button { anchor name: } anchor_1;

.tooltip { position: absolute; top: anchor( anchor_1 150%); right: anchor( anchor_1 -150%); }

@position try pos left { right: anchor(var( anchor name) right); left: auto; }

@position try pos right { left: anchor(var( anchor name) left); }

@position try pos left { right: anchor(var( anchor name) right); left: auto; }

@position try pos right { left: anchor(var( anchor name) left); }

@position try pos left { right: anchor(var( anchor name) right); left: auto; }

@position try pos right { left: anchor(var( anchor name) left); }

.tooltip { position try options: pos right, pos left; position try order: most width; }

codepen.io/michellebarker/pen/jOomKRE

youtube.com/watch?v=XaO2mZnIOzs

codepen.io/michellebarker/pen/pomWryN

Masonry

shorturl.at/LpCUW

Let’s start building creative layouts again.

💖 Thank you css-irl.info