WeAreDevelopers LIVE • Mar 24, 2021

Kirsty's Excellent Adventure in CSS Grid

Kirsty Burgoine

Kirsty shows why CSS Grid makes complex media queries obsolete. Master fluid layouts, Subgrid alignment, and progressive enhancement without falling into visual reordering accessibility traps.

Kirsty's Excellent Adventure in CSS Grid thumbnail

Checking access…

Playback and chapters load privately for Free videos.

Matching moments

2:04 min

Introduction to modern CSS capabilities for designers

Onur Gumus · LIVE

4:12 min

Building grid layouts and managing component spacing

Patricio Vargas · World Congress 2023

3:37 min

Responsive layout challenges and user customization

1:52 min

Mastering CSS layouts through visual Flexbox playground tools

Chris Heilmann

Chris Heilmann +2 · LIVE

2:28 min

Resolving complex item alignments using CSS Subgrid

Onur Gumus · LIVE

4:37 min

Modern CSS visual features and framework integration

Chris Heilmann

Chris Heilmann +2 · LIVE

More from WeAreDevelopers LIVE

Like Peas in a Pod - What Happens When People Clone Your App? thumbnail

about 13 hours ago

Like Peas in a Pod - What Happens When People Clone Your App?

Ivan Kutskir, Christian Heilmann, Daniel Cranney

WeAreDevelopers LIVE - Read more, Prompt Less thumbnail

WeAreDevelopers LIVE - Read more, Prompt Less

Chris Heilmann, Daniel Cranney, Luise Freese

WeAreDevelopers LIVE - Tech Education in Two Languages thumbnail

WeAreDevelopers LIVE - Tech Education in Two Languages

Daniel Cranney, Roxy Rodriguez-Becker

WeAreDevelopers LIVE - Playing in Production thumbnail

WeAreDevelopers LIVE - Playing in Production

Andrew MacLean, Daniel Cranney, Christian Heilmann

WeAreDevelopers LIVE - Is CSS Catching Up to Flash? thumbnail

about 1 month ago

WeAreDevelopers LIVE - Is CSS Catching Up to Flash?

Chris Heilmann, Daniel Cranney, Bramus Van Damme

WeAreDevelopers LIVE - Project Chopin: Make Your Team and Agents Play Along thumbnail

about 1 month ago

WeAreDevelopers LIVE - Project Chopin: Make Your Team and Agents Play Along

Chris Heilmann, Daniel Cranney, Krzysztof Cieślak

Upcoming sessions on this topic

Designing for Every Direction: Logical CSS for Global, Adaptive, and Effortlessly Reversible UIs

Vidhya Krishnamoorthy

Morgan Stanley

VP, Software Engineering Manager

React Under Fire: Rendering Performance for Streaming Agent UIs

Abhirupa Mitra

Slack

Senior Member of Technical Staff

Build a Zero-Cost AI Agent in Your Browser

Aishwarya Mathuria

Adobe

Computer Scientist
Nishant Thakur

Adobe

Senior Computer Scientist

Teaching AI Coding Agents to Build It Right the First Time

Sajeetharan Sinnathurai

Microsoft

Principal Product Manager

Supply Chain Security for the Everyday Engineer

Pradumna Saraf

Kestra Technologies

Quality Assurance Engineer

From Profiler to Production: Measuring What Actually Matters in React & React Native

Andrei Tazetdinov

Dynatrace

React Native Developer

Related videos

What's new in CSS for Designers? thumbnail

LIVE • almost 3 years ago

What's new in CSS for Designers?

Onur Gumus

Future-Proof CSS thumbnail

World Congress 2022 • over 4 years ago

Future-Proof CSS

Ire Aderinokun

Can CSS recreate Tufte's designs? thumbnail

World Congress 2022 • over 4 years ago

Can CSS recreate Tufte's designs?

Håkon Wium Lie

WeAreDevelopers LIVE - Is CSS Catching Up to Flash? thumbnail

LIVE • about 1 month ago

WeAreDevelopers LIVE - Is CSS Catching Up to Flash?

Chris Heilmann, Daniel Cranney, Bramus Van Damme

What’s New and What’s Next in Web UI thumbnail

World Congress 2024 • about 2 years ago

What’s New and What’s Next in Web UI

Cleyra Uzcategui

Designing for Every Direction: Logical CSS for Global, Adaptive, and Effortlessly Reversible UIs thumbnail

Europe 2026 Virtual • 4 months ago

Designing for Every Direction: Logical CSS for Global, Adaptive, and Effortlessly Reversible UIs

Vidhya Krishnamoorthy

Related articles

DC

Daniel Cranney

Building a Bento Grid Layout with Modern CSS Grid

Even if you haven’t heard the term bento before, you’ve almost certainly seen a bento layout on the web in recent years. The name, taken from traditional Japanese bento meals where different dishes...

9 months ago

A screenshot of a bento layout at an angle, with a shallow depth of field

CH

Chris Heilmann

Declarative Design and a fresh take on collaboration with developers

Getting designers and developers on the same page can be tough for digital product teams. Things get especially tricky when the focus is just on fixing little things here and there instead of looki...

over 1 year ago

Illustration showing how developers and designers can work on the same project together

DC

Daniel Cranney

The Overflow: 5 CSS Generators and Visual Design Tools

If you’ve read The Overflow before you’ll know it’s where we take some time you show you our favourite tools from around the web that we simply couldn’t fit into the always-packed Dev Digest. This ...

7 months ago

A table top with different CSS elements represented as blocks (grid), a curve (animations) and flex box alignments.

CH

Chris Heilmann

Dev Digest 133 - Back to Front

News and ArticlesWeAreDevelopers LIVE WebDev Day is on Wednesday, 18/11/2024. Learn about Design-first APIs for UI components, the JavaScript event loop, the Secret sauce behind pattern matching an...

about 2 years ago

Dev Digest 133 - Back to Front

From learning to earning

Jobs that call for the skills explored in this talk.

Remote Senior Full-Stack Engineer

Stockbridge, UK

Expert £63k–98k Remote Redis Docker Datadog

Remote Senior Full-Stack Engineer

Northallerton, UK

Expert £63k–98k Remote Redis Docker Datadog

Remote Senior Full-Stack Engineer

Fraserburgh, UK

Expert £63k–98k Remote Redis Docker Datadog

Remote Senior Full-Stack Engineer

Kirby Cross, UK

Expert £63k–98k Remote Redis Docker Datadog

Remote Senior Full-Stack Engineer

Expert £63k–98k Remote Redis Docker Datadog

Remote Senior Full-Stack Engineer

Expert £63k–98k Remote Redis Docker Datadog