Summary

CSS layouts have been plagued by complexity — until now.  Grid is a layout system similar to flexbox, that offers much more control over both horizontal and vertical aspects of your layout. Grid layout in Webflow borrows directly from CSS grid, introducing a system for arranging design elements within a page, and it comes with a whole new set of on-canvas controls that truly set it apart from Webflow’s existing layout options.The result is an easier, faster, more intuitive way to build layouts — without sacrificing code quality. Check out this course to get a closer look at how grid works in Webflow. 

Lessons in this course

Getting started

Coming soon

Grid
21:17
Coming soon

Fractional unit (FR) overview
2:35
Coming soon

Flexbox vs. Grid
4:00
Coming soon

Grid examples

Coming soon

Span grid content
6:29
Coming soon

Turn a collection list into a responsive grid
5:25
Coming soon

Overlap content in a responsive grid
4:18
Coming soon

CSS grid in Webflow

6
Lessons
Getting started

Getting started

Coming soon

Coming soon

Coming soon

Coming soon
Grid examples

Grid examples

Coming soon

Coming soon

Coming soon

Coming soon
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!

Grid

The grid layout in Webflow brings CSS grid to life on a completely visual canvas, giving you more direct control over your layout and design. With grid, you can reposition and resize items anywhere within the grid you define to produce powerful, responsive layouts — faster.

Download assets
Clone this project
Learn more
Transcript

Fractional unit (FR) overview

An overview of the fractions unit in CSS — a powerful input that automatically calculates layout divisions while taking into account gaps inside a grid.

Download assets
Clone this project
Learn more
Transcript

Flexbox vs. Grid

The similarities and differences between flexbox and grid — what to use and when.

Download assets
Clone this project
Learn more
Transcript

Span grid content

Span content in a responsive grid and automatically fill empty cells using CSS grid-based layouts in Webflow.

Download assets
Clone this project
Learn more
Transcript

Turn a collection list into a responsive grid

Create a Collection list, then turn it into a responsive grid layout that automatically adjusts to fit different screen sizes.

Download assets
Clone this project
Learn more
Transcript

Overlap content in a responsive grid

Create a responsive grid layout with overlapping content. Learn how to change the overlap order while keeping the layout accessible.

Download assets
Clone this project
Learn more
Transcript

Requirements

  • Free (or paid) Webflow account — sign up
  • Chrome or Safari browser
  • Technical schematics for the USS Enterprise (NCC-1701-D)

Directed by

McGuire Brannon

Director of Education

Produced by

Stacy Han

Video Producer

Written by

McGuire Brannon

Director of Education

https://twitter.com/mcguirebrannon

Article by

Anna Kelian

Learning & Development Coach

Edited by

Grímur Grimsson

Video Producer

Stacy Han

Video Producer

Designs by

Stacy Han

Video Producer

Related courses

Be the first to get the newest lessons

We release 2 new lessons every week, always first on Webflow University.

Sign up to learn more about Webflow University releases, including lesson and course launches, certifications, sneak peaks, and Grímur's top secret tips for reversing time.

Shoot, something didn't work. Try again later, bud.