Kirsty Burgoine

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.

Kirsty's Excellent Adventure in 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

Key takeaways and the power of CSS grid

CSS Grid is a powerful, well-supported, two-dimensional layout system that enables flexible and complex designs with less code.

Related jobs
Jobs that call for the skills explored in this talk.

Featured Partners

Related Videos

What's new in CSS for Designers?59:20

What's new in CSS for Designers?

Onur Gumus

Can CSS recreate Tufte's designs?28:00

Can CSS recreate Tufte's designs?

Håkon Wium Lie

Snappy UI needs no Single-Page Application40:24

Snappy UI needs no Single-Page Application

Clemens Helm

Creating a routing app with Google Maps API from scratch55:39

Creating a routing app with Google Maps API from scratch

Germán Álvarez

Playing Games with CSS44:29

Playing Games with CSS

Elad Shechter

Tips and Tricks: CSS Pseudo Class Selectors and Pseudo Elements09:04

Tips and Tricks: CSS Pseudo Class Selectors and Pseudo Elements

Dan Cranney

Using all the HTML, Running State of the Browser and "Modern" is Rubbish1:15:44

Using all the HTML, Running State of the Browser and "Modern" is Rubbish

Chris Heilmann, Daniel Cranney and David Letorey

Extensionator - Rise of the Chromium35:15

Extensionator - Rise of the Chromium

Keren Kenzi

From learning to earning

Jobs that call for the skills explored in this talk.