Kirsty's Excellent Adventure in CSS Grid

What if you could create fully responsive layouts without a single media query? Learn a powerful CSS Grid technique to build fluid, self-organizing grids.

#1about 1 minute

The evolution of CSS layout from tables to grid

CSS has evolved from table-based layouts and floats to modern methods like Flexbox and Grid, enabling more semantic and flexible designs.

#2about 3 minutes

Creating implicit and explicit CSS grids

CSS Grid automatically creates an implicit grid from content, but defining an explicit grid with `grid-template-columns` and `grid-template-rows` provides precise layout control.

#3about 2 minutes

Positioning items using named and numbered track lines

Place and span items precisely within a grid by referencing named or numbered track lines with properties like `grid-column`, `grid-row`, and the `grid-area` shorthand.

#4about 3 minutes

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

Leverage powerful new CSS Grid features like the fractional `fr` unit for proportional sizing, the `repeat()` function for concise definitions, and `minmax()` for responsive control.

#5about 3 minutes

Creating responsive layouts without media queries

Combine `repeat()`, `autofill`, and `minmax()` to create fluid grid layouts that automatically adjust the number of columns based on available space, eliminating the need for breakpoints.

#6about 6 minutes

Managing full-width content with the no-wrapper technique

Apply CSS Grid to the entire page to create flexible gutters and control content width, allowing elements to easily break out of the main container for full-width layouts.

#7about 5 minutes

A preview of the upcoming subgrid feature

Subgrid allows a nested grid to inherit its track definition from its parent, simplifying complex layouts and ensuring consistent alignment across components.

#8about 2 minutes

Avoiding accessibility issues with content reordering

Changing the visual order of grid items with `order` or placement properties can create a confusing experience for users of assistive technologies, so ensure the DOM order remains logical.

#9about 7 minutes

Supporting CSS Grid in Internet Explorer 11

Supporting IE11 requires using the older `-ms-` prefixed syntax, manually placing all grid items, and avoiding modern features like `repeat()` and `minmax()`.

#10about 2 minutes

Key takeaways for using CSS Grid effectively

CSS Grid is a powerful two-dimensional layout system with excellent browser support that enables flexible, maintainable, and complex designs with less code.