> Markdown version of [/videos/126-kirsty-s-excellent-adventure-in-css-grid](https://www.wearedevelopers.com/videos/126-kirsty-s-excellent-adventure-in-css-grid). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md).

---

# Kirsty's Excellent Adventure in CSS Grid 

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.

- **Speakers:** Kirsty Burgoine
- **Event:** WeAreDevelopers LIVE
- **Published:** March 24, 2021
- **Duration:** 36:13
- **URL:** https://www.wearedevelopers.com/videos/126-kirsty-s-excellent-adventure-in-css-grid

## Summary

Web layout evolution has progressed from rigid table structures to the flexibility of CSS Grid, the web's first native two-dimensional spatial layout system. By defining both rows and columns simultaneously, CSS Grid enables developers to build intuitive, responsive interfaces without relying heavily on complex media queries. Core mechanics such as implicit versus explicit grid creation allow content to seamlessly shape container boundaries or adhere to strict architectural rules.

Advanced styling techniques leverage CSS functions like `repeat()` and `minmax()` alongside the fractional `fr` unit to build fluid, auto-flowing interfaces and designs with highly flexible gutters. This native dimensional control eliminates the need for strict breakpoints, making it trivial to weave full-width banner breakouts elegantly into centralized content streams without negative margins. Furthermore, the Subgrid layout specification introduces profound architectural maturity, permitting nested markup elements to directly inherit parent grid sizing for flawless cross-component alignment without redundant container definitions.

Effectively deploying CSS Grid involves mindful awareness of structural accessibility and legacy browser constraints. Visually rearranging layout components via grid placement functions or the `order` property does not alter the underlying DOM source order, which can trigger profoundly jarring navigation paths for screen readers and keyboard navigation users. Creating resilient front-end environments demands progressive enhancement strategies: utilizing `@supports` feature queries ensures reliable structural fallbacks, and understanding Autoprefixer limitations is essential for meticulously crafting explicit `-ms-` prefixed attributes for legacy engines like IE11.

**Keywords:** CSS grid architecture, two-dimensional CSS layouts, implicit vs explicit CSS grids, CSS minmax sizing function, CSS fraction fr unit, responsive layouts without breakpoints, flexible CSS grid gutters, CSS subgrid nested alignment, CSS @supports feature queries, DOM visual source order accessibility, screen reader layout compatibility, progressive enhancement strategies, IE11 legacy browser grid fallbacks, CSS autoprefixer legacy limitations, CSS grid template areas

## Chapters

1. **Evolution of web layout and modern browser support** (00:17) — The transition from table layouts to modern properties reveals broad browser support for newer grid systems.
1. **Understanding the two-dimensional nature of layout geometry** (03:16) — Intersecting vertical and horizontal lines create a true layout method compared to one-dimensional flexbox flow.
1. **Establishing implicit grid layouts with basic placement rules** (04:02) — Relaying on vertical content flow automatically places items into rows without defining explicit column boundaries.
1. **Configuring explicit columns and rows using track lines** (05:06) — Locating horizontal and vertical track lines allows precise positioning and spanning of multiple explicit columns.
1. **Sizing columns efficiently using fraction units and native functions** (07:45) — Leveraging the fr unit and minmax function handles variable space without calculating explicit pixel dimensions.
1. **Building responsive layouts without relying on distinct breakpoints** (10:34) — Combining auto-fill options with minmax functions automatically reflows components dynamically into the available screen width.
1. **Creating full-width content sections using flexible layout gutters** (14:25) — Declaring specific named boundary tracks enables components to break out of wrappers naturally across varied screen dimensions.
1. **Synchronizing nested structural alignments using css subgrid features** (20:15) — Inheriting parent track definitions eliminates duplicate dimension configuration and structurally aligns deeply nested child containers.
1. **Balancing visual item reordering with accessibility limitations** (25:06) — Shifting layout items visually without changing source DOM order creates problematic jumping experiences for screen readers and keyboard navigation.
1. **Managing internet explorer fallbacks and autoprefixer rule limitations** (27:01) — Writing correct ms-prefixed properties and managing manual auto-placement overrides maintains functional layout experiences in legacy rendering engines.
1. **Summarizing the core capabilities and future of grid layouts** (34:29) — Moving away from rigid pixel limits provides developers with fundamentally simpler ways to achieve responsive reflow logic.

## Related Moments

- [Introduction to modern CSS capabilities for designers](https://www.wearedevelopers.com/videos/835-what-s-new-in-css-for-designers) (from "What's new in CSS for Designers?")
- [Building grid layouts and managing component spacing](https://www.wearedevelopers.com/videos/640-level-up-your-angular-css-with-tailwind-css) (from "Level up your Angular CSS with Tailwind CSS")
- [Mastering CSS layouts through visual Flexbox playground tools](https://www.wearedevelopers.com/videos/1299-new-browser-apis-end-of-react-create-app-smuggling-data-in-emoji-and-more-with-rowdy-rabouw) (from "New Browser APIs, End of React Create App, Smuggling Data in Emoji and more with Rowdy Rabouw")
- [Resolving complex item alignments using CSS Subgrid](https://www.wearedevelopers.com/videos/835-what-s-new-in-css-for-designers) (from "What's new in CSS for Designers?")
- [Evaluating the future utility of CSS Houdini web standards](https://www.wearedevelopers.com/videos/641-is-css-houdini-finally-usable-in-2023) (from "Is CSS Houdini finally usable in 2023?")
- [The proliferation of CSS beyond web browsers](https://www.wearedevelopers.com/videos/1850-wearedevelopers-live-css-or-bs) (from "WeAreDevelopers LIVE - CSS or BS?")

## Related Articles

- [Building a Bento Grid Layout with Modern CSS Grid](https://www.wearedevelopers.com/magazine/682-building-a-bento-grid-layout-with-modern-css-grid)
- [Declarative Design and a fresh take on collaboration with developers](https://www.wearedevelopers.com/magazine/595-declarative-design-and-a-fresh-take-on-collaboration-with-developers)
- [The Overflow: 5 CSS Generators and Visual Design Tools](https://www.wearedevelopers.com/magazine/708-the-overflow-5-css-generators-and-visual-design-tools)
- [Dev Digest 133 - Back to Front](https://www.wearedevelopers.com/magazine/474-dev-digest-133-back-to-front)

## Related Jobs

- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/679408-remote-senior-full-stack-engineer) at **Edge Impulse**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/639235-remote-senior-full-stack-engineer) at **Edge Impulse**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/645320-remote-senior-full-stack-engineer) at **Edge Impulse**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/646086-remote-senior-full-stack-engineer) at **Edge Impulse**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/683045-remote-senior-full-stack-engineer) at **Edge Impulse**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/356164-remote-senior-full-stack-engineer) at **Edge Impulse**