Cloneable grid layouts built in Webflow

Grab these cloneable layouts to better understand grid layout, reuse pieces, or get some inspiration.

No items found.

Sometimes, the best way to learn how something’s built is to take it apart. So we built four different single-page layouts using grid and made them cloneable, so you can dissect them to your heart’s content.

Whitespace grid

Whitespace grid layout responsively changing.

This example showcases how easy it is to build layouts with significant whitespace — a feat that usually requires an inordinate number of elements when using layout tools like flexbox. It also shows how easy it is to reorder content across breakpoints.

Clone this project

See it live

Open in Webflow

Newspaper grid

Responsive newspaper grid layout.

A more “practical” application for grid is designing something like a news or blog homepage, which you often see designed on a grid.

Clone this project

See it live

Open in Webflow

Design interactions and animations without code

Build complex interactions and animations without even looking at code.

Subscribe to be a Webflow Insider
Thank you! You are now subscribed!
Oops! Something went wrong while subscribing.
Start animating

Overlapping grid

Responsive overlapping grid layout.

This page highlights how easy it is to create a broken, overlapping grid layout in Webflow. Perhaps most significantly though, as the page resize you can see how easy it is to reconfigure the layout as you change breakpoints.

Clone this project

See it live

Open in Webflow

Pricing grid

Responsive pricing grid.

Have you built a pricing grid before? It’s generally not very fun. So many elements, so much content — don’t even get me started on how it all shakes out on mobile. But good news: all these problems and more get easier when you build with grid.

Clone this project

See it live

Open in Webflow

Get your grid on

Enjoy picking these designs apart — and using elements of them in your own work! If you make something great with one or more of these layouts, we’d love to see it, so be sure to share it on Twitter with the #WebflowGrid hashtag.

Published

October 10, 2018

Category

Resources

Join the conversation

What's Webflow?

Try it for free
More about the Designer

Designer

The power of CSS, HTML, and JavaScript in a visual canvas.

Interactions

Build website interactions and animations visually.

More about Interactions

CMS

Define your own content structure, and design with real data.

More about the CMS

Ecommerce

Goodbye templates and code — design your store visually.

More about Ecommerce

Editor

Edit and update site content right on the page.

More about the Editor

Hosting

Set up lightning-fast managed hosting in just a few clicks.

More about Hosting