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

WeAreDevelopers LIVE - Tech Education in Two Languages thumbnail
1:00:18
1 day ago

WeAreDevelopers LIVE - Tech Education in Two Languages

Daniel Cranney, Roxy Rodriguez-Becker

WeAreDevelopers LIVE - Playing in Production thumbnail
1:06:40
8 days ago

WeAreDevelopers LIVE - Playing in Production

Andrew MacLean, Daniel Cranney, Christian Heilmann

WeAreDevelopers LIVE - Is CSS Catching Up to Flash? thumbnail
1:03:33
22 days 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
1:21:17
29 days 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 Cieślak thumbnail
4:23
about 1 month ago

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

Chris Heilmann, Daniel Cranney

WeAreDevelopers LIVE - Open Source Agent Toolkits thumbnail
1:00:38
about 1 month ago

WeAreDevelopers LIVE - Open Source Agent Toolkits

Chris Heilmann, Daniel Cranney, Eddie Jaoude

Related videos

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

What's new in CSS for Designers?

Onur Gumus

Future-Proof CSS thumbnail
37:55
World Congress 2022 • over 4 years ago

Future-Proof CSS

Ire Aderinokun

Can CSS recreate Tufte's designs? thumbnail
28:00
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
1:03:33
LIVE • 22 days 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
22:46
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
33:03
Europe 2026 Virtual • 3 months ago

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

Vidhya Krishnamoorthy

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.