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

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.

Use CSS grid to position content within a responsive layout.

Grid
6:04
Coming soon

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

Get an overview of the FR unit in CSS: an input that automatically calculates layout divisions while adjusting for gaps inside a grid.

Fractional unit (FR) overview
2:35
Coming soon

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

Learn the similarities and differences between flexbox and CSS Grid so you know what to use and when.

Flexbox vs. Grid
4:00
Coming soon

Grid examples

Coming soon

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

Create a responsive grid layout with content that span multiple cells, and let the grid automatically fill empty cells with dense.

Span grid content
6:29
Coming soon

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

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

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

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

Create a responsive grid layout with overlapping content. Change the overlap order while keeping the layout accessible.

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!
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.

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.

Learn more

Transcript

Flexbox vs. Grid

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

Learn more

Transcript

Span grid content

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

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.

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.

Learn more

Transcript

Requirements

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

Related courses

Related courses

Notes:

  • The main video will get replaced with javascript after the site loads either from the browser's url if there's a videoUrl there, otherwise from the first video in the nav
  • We should pick some default video so people who have javascript turned off load some webflow video instead of wistia example currently there. do that in the embed with the iframe ^
  • The embed at the bottom of the page has some configurable options at the top of that code block. eg: you can tweak what the urls look like, but once this launches don't change them
  • Right now the classes used in the side nav can be edited by adding an element there with those classes. If you'd rather edit the css for those directly in the code you can add a css block in a new html embed at the top of this page for that, if doing that consider changing their names to not conflict with classes edited in the designer