Modern CSS Layout

💖 Drums 💖 CSS 💖 Windmills

css-irl.info

Multi-column Flexbox Custom properties Container queries aspect-ratio min() / max() / clamp() Grid :has() Logical properties Viewport units Subgrid Writing modes

“ Intrinsic web design Jen Simmons ”

Flex or Grid?

Flexbox One dimension Flexible layout Two dimensions Strict alignment Gap support Layout based on content Layout based on context Grid

centred

Flexbox

Grid 1fr auto 1fr

Flexbox

codepen.io/michellebarker/pen/qBxNWZP

grid-template-columns: 1fr repeat(10, minmax(0, 6rem)) 1fr; codepen.io/michellebarker/pen/qBxNWZP

codepen.io/michellebarker/pen/qBxNWZP

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

Demo codepen.io/michellebarker/pen/ExEzvBx

min, max and clamp min(1rem, 2vw) max(1rem, 2vw)

min, max and clamp clamp(1rem, 2vw, 3rem)

Demo codepen.io/michellebarker/pen/ExEzvBx

Size Viewport width

utopia.fyi

Flex or Grid?

Demo codepen.io/michellebarker/pen/poVvabe

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

Subgrid

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

No subgrid? No problem!

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

:has() (the parent selector)

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

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

Demo codepen.io/michellebarker/pen/poVvabe

wpt.fyi/interop-2022

🥰 Thank you @MicheBarks / @CSSInRealLife