Video tutorials and resources to help you master CSS Grid Layout

CSS Grid Layout is a powerful new tool that allows web designers and developers to create dynamic, pixel-perfect grids without using third-party frameworks, like Bootstrap or Foundation. It all happens by adding just a few lines right into your CSS. However, it takes some time to master the terminology and concepts of CSS Grid Layout. Here you'll find video tutorials and resources to help you master Grid in no time. Start with the videos here and then be sure to check out the resources for continued study, deeper concepts, and updates on CSS Grid.


Learn CSS Grid Layout

CSS Grid Introduction

A high level introduction to the new CSS Grid Layout specification. Learn about the key features and see cool some examples to show you what's possible with Grid.

Placing Items on the Grid

Learn how to place individual items on the grid using CSS Grid Layout. This opens the possibility of creating truly dynamic grid layouts by placing items where you want them.

Aligning Items on the Grid

Learn how to align the grid and all of the individual items in the grid using CSS Grid Layout. This powerful feature allows for variation within each grid item.

Auto Flow Columns & Rows

The auto-flow feature in CSS Grid allows you to determine the order in which the rows and columns are laid out. Useful for laying out content in sequential order.

Grid Areas

CSS Grid allows you to create large areas where you can specifically place nested grids or other items. Learn how to create regions or areas on your grid.


Build A CSS Grid Website


Video 1

The first video in the series introduces the project and shows the layout that we want to achieve using CSS Grid Layout.

Grid Setup

Video 2

In the second video, see how the entire website can be set up using CSS Grid Layout. Learn how to think through laying out a website using Grid.

Header & Navigation

Video 3

The third video in this series will teach you how to create a responsive header and navigation using CSS Flexbox. Flexbox is a great compliment to CSS Grid Layout.

Hero Section

Video 4

In this video, you'll learn how to create a hero image with text overlay, again using CSS Flexbox. We'll also look at creating background images in CSS.

Features Section

Video 5

In video 5 of this series, you'll create a features section using a nested CSS Grid. The features section highlights three items or posts.

Featured Text Box

Video 6

This video shows you how to create a featured text box that displays a call to action or callout text. Again we use background images and Flexbox.

Blog/News Section

Video 7

The seventh video shows you how to create a front page blog or news section using a nested CSS Grid Layout. This media section also includes links to read more.


Video 8

In this video you'll learn how to set up an Apple-style footer using CSS Grid Layout. The links are used for internal or external links to improve user experience.

Responsive Design

Video 9

The final video of the series looks at making sure the design is fully responsive. You'll utilize media queries to create a website that looks good on any device.

CSS Grid Resources

Rachel Andrew

CSS Grid advocate, Speaker, Co-founder of Perch CMS

Jen Simmons

Designer Advocate at Mozilla, Speaker, Podcaster

CSS Tricks Guide

Definitions and examples of all CSS Grid Layout properties