WeAreDevelopers Logo WeAreDevelopers
Sign in
For You LIVE
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 · WWC 2023

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 · WWC 2023

1:51 min

The proliferation of CSS beyond web browsers

Chris Heilmann +2 · LIVE

More from WeAreDevelopers LIVE

Aliens in Quarantine, Python Deprecates Loops, and AI Buys Old Books - Zbyszek Tenerowicz thumbnail
5:43
5 days ago

Aliens in Quarantine, Python Deprecates Loops, and AI Buys Old Books - Zbyszek Tenerowicz

Chris Heilmann, Daniel Cranney

WeAreDevelopers LIVE - Node and Package Security thumbnail
1:08:30
5 days ago

WeAreDevelopers LIVE - Node and Package Security

Chris Heilmann, Daniel Cranney, Zbyszek Tenerowicz

WeAreDevelopers LIVE - Streaming HTML thumbnail
1:10:26
12 days ago

WeAreDevelopers LIVE - Streaming HTML

Chris Heilmann, Daniel Cranney, Jad Joubran

WeAreDevelopers LIVE - CODE100 at WeAreDevelopers Europe thumbnail
1:02:34
19 days ago

WeAreDevelopers LIVE - CODE100 at WeAreDevelopers Europe

Chris Heilmann, Daniel Cranney, Justin Halsall, Werner Jeschko, Nicole Jeschko, Mirco Tomić

WeAreDevelopers LIVE - Web Performance in an AI World thumbnail
1:07:59
26 days ago

WeAreDevelopers LIVE - Web Performance in an AI World

Chris Heilmann, Daniel Cranney

FIFA Hack, Midjourney Does Ultrasounds, and Trampoline Traffic Lights - Nicole Jeschko and Werner Jeschko thumbnail
5:55
about 2 months ago

FIFA Hack, Midjourney Does Ultrasounds, and Trampoline Traffic Lights - Nicole Jeschko and Werner Jeschko

Chris Heilmann, Daniel Cranney

Upcoming sessions on this topic

Open session

World Congress 2026 North America

Architecting AI in Angular: WebMCP, A2UI, and the Agent Experience

Ankita Sood

Sr. Principal Engineer @ Secureworks | Angular GDE

Ankita Sood
Open session

World Congress 2026 North America

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
Open session

World Congress 2026 North America

Fast by Design: A Masterclass in High-Performance Web Engineering

Aaron Grogg

Senior web developer, committed to improving the user experience by improving web performance

Aaron Grogg
Open session

World Congress 2026 North America

Vibe Coding Accessibility

Karl Groves

Focused on actively fixing accessibility

Karl Groves
Open session

World Congress 2026 North America

How to generate business value through performance optimizations

Nikolai Sidiropulo

Software Engineer at Meta

Nikolai Sidiropulo
Open session

World Congress 2026 North America

Small LLM in your Browser: Huge Opportunities for Web Applications

Daniel Ostrovsky

UI/UX Architect at Payoneer | AI Architect | Full Cycle Development Expert | Public Speaker | Open Source Contributor |

Daniel Ostrovsky

Related videos

What's new in CSS for Designers? thumbnail
59:20
LIVE • over 2 years ago

What's new in CSS for Designers?

Onur Gumus

Future-Proof CSS thumbnail
37:55
WWC 2022 • about 4 years ago

Future-Proof CSS

Ire Aderinokun

Can CSS recreate Tufte's designs? thumbnail
28:00
WWC 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
22:46
WWC 2024 • almost 2 years ago

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

Cleyra Uzcategui

WeAreDevelopers LIVE - CSS or BS? thumbnail
52:59
LIVE • 4 months ago

WeAreDevelopers LIVE - CSS or BS?

Chris Heilmann, Daniel Cranney, Keith Cirkel

WeAreDevelopers LIVE - CSS is DOOMed thumbnail
59:11
LIVE • 5 months ago

WeAreDevelopers LIVE - CSS is DOOMed

Chris Heilmann, Daniel Cranney, Justin Halsall, Christian Schaefer

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.