Lesson info

Assets

Want to follow along with this lesson? Fortunately, we created a zip file which contains all the assets used in the project, and we've included that link 

right here
.

Transcript

This is a top-level overview of Webflow’s grid feature.

Five things:

  1. Adding a grid
  2. Dropping things in a grid
  3. Moving things in a grid
  4. Spanning multiple cells
  5. Editing a 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. Quick find? Yeah, that’s a thing. Just type grid. Enter. That’s it.

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

How do we change position? (How do we move stuff?) We can drag elements anywhere. Clicking...and dragging selects the content inside each cell. Not the cell itself. The cell is like a guide. (All we’re doing is moving our elements around inside these guides.)

What if we want to center something in the cell? You can do this a few ways: we could select our grid parent (this is our element with grid applied) and simply center the children horizontally — and then center the children vertically. Everything will center inside each of those cells.

We could also affect alignment on the element itself. So this time the grid’s not selected; only this element is.

Or you can drag in a div block and use that div block to position content. Which means, yes, you can use flexbox and grid together. We have separate content that covers both flex and grid.

That’s moving. How about spanning? Just click...and drag. That’s it. All we do is select the thing, and we click and drag.

Want it to change in another view? Want to design for different devices? We can make that change. Come back to desktop? Everything’s as you’d expect.

Let’s go back to moving. What about moving? Let’s move something in a different breakpoint. That works, too. Come back to desktop? The change only applies on that breakpoint and any smaller breakpoints under it.

Let’s hop over to #5: Editing a grid. To edit a grid...press edit grid. Or, any time you have a grid element selected, you can press the edit grid button on the canvas.

From there, you can add rows, you can add columns. You can adjust the gaps in between rows and columns. You can delete a row. Or delete a column.

It gets better. Want to adjust your columns or your rows? You can set track sizing right on the canvas.

So. We can add a grid just like any other element. We can drop things in a grid. We can move those things inside grid. We can grab the corner and drag to span multiple cells. And at any time, we can edit the grid (add stuff, delete stuff).

Now we cover a lot more of this in our other content on Webflow University — in written guides and in some other videos — so check that out if you haven’t already.

But that’s it for now. That’s a brief, top-level overview of grid.