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.

Pause the background video
Webflow is free for students and educators
Learn more & apply

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. 

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

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

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

Flexbox vs. Grid

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

Span grid content

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

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.

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.

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

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.