Modern CSS Layout is Awesome!

🙂 Hard Easy

Hard 🙂 🤯 Easy CSS can do THAT?!!

Modern CSS Layout is Awesome!* *(I promise)

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

.item { aspect-ratio: 1; } codepen.io/michellebarker/pen/bGLpOZz

img { display: block; width: 100%; height: 100%; object-fit: cover; } codepen.io/michellebarker/pen/bGLpOZz

img { display: block; width: 100%; height: 100%; object-fit: contain; } codepen.io/michellebarker/pen/QWQqggO

codepen.io/michellebarker/pen/YzeqRrP

3 2 codepen.io/michellebarker/pen/YzeqRrP

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

figure { display: grid; } figure > * { grid-area: 1 / 1; }

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

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 */ } }

figure { display: grid; grid-template: subgrid / subgrid; }

img { grid-column: 1 / span 3; grid-row: 1 / span 2; }

figcaption { grid-column: 4 / span 2; grid-row: 2; }

Responsive layouts

Demo

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

:has()

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

Animated grid tracks

.grid:has(> :nth-child(3n):hover) { grid-template-columns: 1fr 1fr 2fr; }

Demo

💖 Thank you Website: css-irl.info Mastodon: @michelle@front-end.social