Kirsty's Excellent Adventure in CSS Grid

What if you could create responsive layouts without a single media query? Learn the powerful 'no breakpoints' technique using CSS Grid.

#1about 1 minute

The evolution of web layout from tables to grid

Web layout techniques have evolved from table-based designs and floats to modern, powerful systems like Flexbox and CSS Grid.

#2about 3 minutes

Defining implicit and explicit CSS grids

An implicit grid is automatically created from content, while an explicit grid gives you precise control by defining columns and rows.

#3about 2 minutes

Positioning items using grid track lines and areas

Place and span items across the grid by referencing track line names or numbers with properties like `grid-column` and `grid-area`.

#4about 3 minutes

Using new units and functions like fr, repeat, and minmax

The `fr` unit, `repeat()` function, and `minmax()` function provide powerful and flexible ways to define responsive grid tracks.

#5about 4 minutes

Building responsive layouts without using media queries

Combine `autofill`, `repeat()`, and `minmax()` to create intrinsically responsive grids that adapt to available space without explicit breakpoints.

#6about 4 minutes

Creating full-width layouts with a no-wrapper approach

Apply CSS Grid to the entire page to create flexible gutters and allow specific elements to easily span the full viewport width without extra wrappers.

#7about 2 minutes

Designing complex editorial layouts with CSS grid

Leverage a page-level grid system to place content into complex, visually appealing editorial-style arrangements across multiple rows and columns.

#8about 5 minutes

Exploring the future of nested layouts with subgrid

The upcoming `subgrid` feature will allow nested grid containers to inherit and align with the track sizing of their parent grid.

#9about 2 minutes

Avoiding accessibility issues with content reordering

Changing the visual order of grid items with CSS properties can create a confusing experience for keyboard and screen reader users if it differs from the source order.

#10about 5 minutes

Manually supporting the legacy Internet Explorer grid spec

Supporting IE10 and IE11 requires using `-ms-` vendor prefixes and manually placing every grid item due to the lack of auto-placement.

#11about 3 minutes

Using modern tooling and fallbacks for IE support

Use Autoprefixer with `grid-template-areas` for partial IE support, or use the `@supports` rule to provide a simpler Flexbox or block layout fallback.

#12about 2 minutes