Pause the background video

CSS grid in Webflow

Start off the year with a 21-day portfolio challenge

Intermediate
27min

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. 

An overview of CSS grid. Use the grid layout in Webflow to get more control over your designs and create powerful, responsive layouts — faster.

Yes, this course is from the future.

Clone this project
Use this version to clone
the completed project
Clone this project
Blank pages without hitting page limits
  • Free (or paid) Webflow account — sign up
  • Chrome or Safari browser
  • Technical schematics for the USS Enterprise (NCC-1701-D)

Lessons in this course

Getting started
Grid examples

The challenge

Challenge
Day
Be a website hero
01
The ultimate navbar
02
Magical CMS layout
03
Formulate leads and science
04
Virtual shoes for your site
05
Hello, it's responsiveness
06
Show off your project pages
07
Project pages working everywhere, anywhere
08
The optimum contact page
09
Show us your contact page
10
Test your Open Graph settings
11
Shine a light
12
Bring your portfolio to life
13
Lost, but never forgotten
14
Password-protected
15
Practice accessibility
16
Share your design in progress
17
Ready, set, publish!
18
Portfolio verification
19
Update your CMS
20
Showcase your portfolio
21

Summary

Course progress

Nice job, we did some time travel into the future and it is looking amazing!

0
%

Completed

0
of
6

Lessons done

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. 

Open the completed project
Open the project with
blank pages

Ready to get certified?

Once you’ve completed the Webflow Expert Certification Course, you’re all set to take the next step in becoming a Webflow Expert. Please note: passing the Expert exam does not guarantee entry into the Webflow Expert program.

Go to Webflow Experts exams

Course outline

Getting started
Grid examples

Related courses

CSS grid in Webflow

6
Lessons
Getting started
Getting started
Grid examples
Grid examples

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.

Transcript
Read the full article

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.

Transcript
Read the full article

Flexbox vs. Grid

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

Transcript
Read the full article

Span grid content

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

Transcript
Read the full article

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.

Transcript
Read the full article

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.

Transcript
Read the full article

Requirements

  • Free (or paid) Webflow account — sign up
  • Chrome or Safari browser
  • Technical schematics for the USS Enterprise (NCC-1701-D)
Clone this project
Use this version to clone the completed project
Clone this project
Blank pages without hitting page limits

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

There's more coming

We're rolling out more lessons very shortly. Sign up to get early access to additional Webflow lessons and courses.

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