A presentation at Beyond Tellerand in in Düsseldorf, Germany by Michelle Barker
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 problem
The problem
The solution ul { gap: 1em 0.5em; }
New and improved viewport units
The problem
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; }
.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
2022 was an amazing year for CSS, bringing us a whole host of features to help us solve common layout challenges. In this session we’ll delve into some real-world use cases for container queries, subgrid, the :has() pseudo class (or parent selector) and much more. We’ll explore how to combine these new features with some more familiar ones, in order to build robust, flexible and creative layouts that respond to both content and context.
for free. You
can too.