Building grid layouts in Webflow

(Revision of this instructional video page for a CMS provider with a unique, quirky voice.)

This course helps you to understand how to spend less time doing complicated math for CSS layouts and more time designing your page.

About this course

Flexbox is great; it’s adaptable, detailed, and packed with features to fine-tune your content.

Grid gives you the power to create a responsive CSS grid for that content with an intuitive, elegant visual editor that does the math for you.

Love Flexbox? So do we. That’s why we designed Flexbox and Grid to work together.

Requirements

  • Free (or paid) Webflow account — sign up
  • Chrome or Safari browser
  • A passionate distaste for time-wasting calculations

How grid layouts work

You can do all sorts of things with Grid, using three basic actions:

  1. Add a grid
  2. Place content
  3. Edit the grid

Adding a grid

You can add a grid to nearly everything in Webflow. Drag ‘Grid’ from the elements panel into your canvas, or select ‘Grid’ from a section or div block menu. Webflow creates a 4X4 grid to help you get started.

You can also design for specific devices by selecting one of the device icons on the top of the screen. If you select tablet, for example, and make layout changes, these changes will affect only tablet and smaller sizes — leaving the desktop version as-is.

Placing content

After you’ve placed a grid, you can grab any content you have, drag it, and drop it into the grid:

To move content from one cell to another, click and drag: just as you placed the content. Simple as that!

If you would like content to span more than one cell, select that content and drag it wider to encompass the cells you would like to span. The grid will adjust to its new reality.

Guess what else is content? Div blocks. That means you can combine the strengths of Flexbox with Grid. Just drag a div block into your grid (or a grid inside of a div block).

Editing content spacing and the grid

There are two ways to edit layout: globally and individually.

Global grid editing

Select ‘Edit Grid’ from the canvas or from the righthand menu to edit the entire grid layout.

Using the menu, add or delete rows and columns, adjust the spacing, or delete a row or column.

If you would like to resize individual columns (or rows), you can do it on the canvas directly, using a slider.

So what do you need to do to adjust the other columns?

Absolutely nothing. The good people at Webflow have done all the math for you. You’re welcome.

Editing individual content

To create a specific layout for one chunk of content without affecting the others, select the content rather than the grid, and do your magic. The rest of the grid will remain untouched.

Take a spin through some sample layouts using grid.

A closer look

What, that wasn’t enough, you say? Don’t panic! This was only a brief overview.

Take a deeper dive into: