Webflow Grid 2.0

Learn how to start or grow your freelance career from the very beginning: getting clients, doing the work you want to do, and getting paid to do it.

This is a top-level overview of grid 2.0 in Webflow. Among other things, Grid 2.0 introduces, of course, what Barrett calls “responsive magic.” For a number of CSS-driven layouts, grid is one of the fastest and most powerful ways to design and develop.

So we’re going to cover how to do four things: Create (and edit) a grid, Place content inside a grid, Move, span, and align stuff, and finally, Design a responsive grid.

Number 1.  Anything can be a grid. Almost anything. Here’s a section. Click grid? Now you have a grid. Here’s a div block. Click grid? Now you have a grid. On the elements panel? There’s a grid you can just drag right in. Collection list filled with dynamic content from the CMS? Set its display setting to a grid? Now you have a grid. That’s it.

And to edit a grid you created...press edit grid. That’s the first way. The second is to select the grid, and press the edit grid button on the canvas. Or, even faster: select a grid? Hit enter. Now you are editing the grid.

When you create a grid, and you’re editing that grid, you can add rows, you can add columns. You can delete a row. Or delete a column.

You can adjust the gaps in between rows and columns.

You can also do this on the canvas. Just click and drag and you can adjust that space (you can adjust those gaps) on the grid itself. If you want to make adjustments to the gaps between rows and columns, hold down shift while dragging.

It gets better. Want to adjust the columns themselves? You can do this, too; you can adjust sizing on a column by clicking and dragging — you can do this right on the canvas when you’re editing a grid.

When you’re done editing, just press escape, or, press the button that says “done.”

Second thing: Here’s a grid. It’s a 4x4: four columns...four rows. Let’s drag things into our grid. (All we’re doing is clicking and dragging, letting go when we place it in the grid.)

Notice how, by default, content is automatically placed. The children of the grid (the grid itself being the parent) — the children are just wrapping around and filling up the available cells. It’s doing this automatically regardless of where we’re dropping the content inside the grid.

Watch this: let’s grab this element and drag it into the bottom-right cell. What happens when we let go? It doesn’t go into that cell. Which is exactly what we’d expect, because it’s set to auto.

So what if we want to manually place something? Well, all we have to do is click that something, and press manual. And now? It’s manually placed. We can move it around anywhere in our grid. And when we do? Other content will wrap around it, and it’ll maintain its position wherever we placed it.

And if there’s something set to auto and we want to drag it somewhere specific? Hold down shift...and drag. Now that element which was auto is now manually placed. (It’s placed where you told it to go.)

Want to duplicate something? Hold down option or alt and drag that something somewhere else in the grid.

And we’re all thinking the same thing: can you drag in another grid? Yes. Gridception.

That’s putting stuff in a grid.

  • 0:00 - Intro
  • 0:03 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • 0:55 - Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis.
  • 1:11 - Nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  • 2:22 - Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis.
  • 3:33 - Nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Up next

Play

The FR Unit

This video features a brief overview of the fractions unit in CSS: a powerful input that automatically calculates layout divisions while taking into..

Series episodes

Core concepts
Play
Core concepts
Webflow Grid 2.0
Play
Webflow Grid 2.0
The FR Unit
Play
The FR Unit
Grid vs Flexbox
Play
Grid vs Flexbox
Grid examples
Play
Grid examples
Spanning sparkling water flavors in a ROYGBIV grid
Play
Spanning sparkling water flavors in a ROYGBIV grid