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.

Pause

Mute

Enter Fullscreen

#1 about 3 min

Evolution of web layout and modern browser support

The transition from table layouts to modern properties reveals broad browser support for newer grid systems.

#2 about 1 min

Understanding the two-dimensional nature of layout geometry

Intersecting vertical and horizontal lines create a true layout method compared to one-dimensional flexbox flow.

#3 about 2 min

Establishing implicit grid layouts with basic placement rules

Relaying on vertical content flow automatically places items into rows without defining explicit column boundaries.

#4 about 3 min

Configuring explicit columns and rows using track lines

Locating horizontal and vertical track lines allows precise positioning and spanning of multiple explicit columns.

#5 about 3 min

Sizing columns efficiently using fraction units and native functions

Leveraging the fr unit and minmax function handles variable space without calculating explicit pixel dimensions.

#6 about 4 min

Building responsive layouts without relying on distinct breakpoints

Combining auto-fill options with minmax functions automatically reflows components dynamically into the available screen width.

#7 about 6 min

Creating full-width content sections using flexible layout gutters

Declaring specific named boundary tracks enables components to break out of wrappers naturally across varied screen dimensions.

#8 about 5 min

Synchronizing nested structural alignments using css subgrid features

Inheriting parent track definitions eliminates duplicate dimension configuration and structurally aligns deeply nested child containers.

#9 about 2 min

Balancing visual item reordering with accessibility limitations

Shifting layout items visually without changing source DOM order creates problematic jumping experiences for screen readers and keyboard navigation.

#10 about 8 min

Managing internet explorer fallbacks and autoprefixer rule limitations

Writing correct ms-prefixed properties and managing manual auto-placement overrides maintains functional layout experiences in legacy rendering engines.

#11 about 2 min

Summarizing the core capabilities and future of grid layouts

Moving away from rigid pixel limits provides developers with fundamentally simpler ways to achieve responsive reflow logic.

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 +2 · LIVE

2:28 min

Resolving complex item alignments using CSS Subgrid

Onur Gumus · LIVE

2:55 min

Evaluating the future utility of CSS Houdini web standards

Tanja Ulianova · World Congress 2023

More from WeAreDevelopers LIVE

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

about 22 hours ago

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

Chris Heilmann, Daniel Cranney, Krzysztof Cieślak

Fake or News - AI Toothbrushes, Carrier Pigeon Tech & Life on Mars - Krzysztof Cieślak thumbnail

Fake or News - AI Toothbrushes, Carrier Pigeon Tech & Life on Mars - Krzysztof Cieślak

Chris Heilmann, Daniel Cranney

Fake or News - AI Music Detectors, Translating Ancient Languages & Tiny Heads in Teslas - Eddie Jaoude thumbnail

Fake or News - AI Music Detectors, Translating Ancient Languages & Tiny Heads in Teslas - Eddie Jaoude

Chris Heilmann, Daniel Cranney

Fake or News: AI Agents Hire Each Other, Spider-Man Ads in Cars & RAM Thieves - Marc Plogas thumbnail

Fake or News: AI Agents Hire Each Other, Spider-Man Ads in Cars & RAM Thieves - Marc Plogas

Chris Heilmann, Daniel Cranney, Marc Plogas

WeAreDevelopers - Of Agents and Robots thumbnail

WeAreDevelopers - Of Agents and Robots

Chris Heilmann, Daniel Cranney, Marc Plogas

WeAreDevelopers LIVE - How DevRel Makes Tech More Human thumbnail

WeAreDevelopers LIVE - How DevRel Makes Tech More Human

Chris Heilmann, Daniel Cranney

Upcoming sessions on this topic

World Congress 2026 North America

September 24, 2026 · 12:50–13:20

Stage 7

Architecting Agentic Apps: WebMCP, A2UI, and Agent Experience

Ankita Sood

Sr. Principal Engineer @ Secureworks | Angular GDE

Ankita Sood

World Congress 2026 North America

September 25, 2026 · 11:00–11:30

Stage 6

Secure-by-Inclusion: Preventing Accessibility Barriers from Becoming Security Vulnerabilities

Radostina (Ina) Tsvetkova

Norwegian Directorate of Labour and Welfare (NAV), Senior Advisor in Digital Accessibility and Inclusive Design

Radostina (Ina) Tsvetkova

World Congress 2026 North America

September 25, 2026 · 09:40–10:10

Stage 5

Vibe Coding Accessibility

Karl Groves

Focused on actively fixing accessibility

Karl Groves

World Congress 2026 North America

September 24, 2026 · 16:00–18:00

Stage 10

Reprompting the Wheel? Why AI Won’t Save Your Content Platform

Benni Mack

TYPO3 CMS Project Lead at TYPO3

Benni Mack

World Congress 2026 North America

September 23, 2026 · 14:20–14:50

Stage 2

Build Interactive Copilot Experiences with Canvas Extensions

James Clancey

Principal Product Manager at GitHub

James Clancey

World Congress 2026 North America

September 24, 2026 · 10:20–10:50

Stage 1

The Browser Is Becoming an AI Runtime

Ajit Varma, Will Bryk

Ajit Varma

Will Bryk

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 • about 4 years ago

Future-Proof CSS

Ire Aderinokun

Can CSS recreate Tufte's designs? thumbnail

World Congress 2022 • about 4 years ago

Can CSS recreate Tufte's designs?

Håkon Wium Lie

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 • 2 months ago

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

Vidhya Krishnamoorthy

WeAreDevelopers LIVE - CSS or BS? thumbnail

LIVE • 5 months ago

WeAreDevelopers LIVE - CSS or BS?

Chris Heilmann, Daniel Cranney, Keith Cirkel

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

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

6 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...

almost 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

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

Remote Senior Full-Stack Engineer

Expert £63k–98k Remote Redis Docker Datadog

Remote Senior Full-Stack Engineer

Expert £63k–98k Remote Redis Docker Datadog

Remote Senior Full-Stack Engineer

Armagh City, Banbridge and Craigavon, UK

Expert £63k–98k Remote Redis Docker Datadog