Lesson info

Lesson info

Explore this project

Want to dig into the project featured in this video and see how everything is put together? We've included the full project we used when making this lesson, and we've shared the link right under this very paragraph.

View and clone this projectDownload lesson assets
Clone this projectDownload project assets

Transcript

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.

And how do we move stuff? We can drag to sort elements any way we’d like. Clicking...and dragging selects the content inside each cell. Not the cell itself. The cell (in fact, our entire grid) is like a guide. (All we’re doing is moving our elements around inside these guides.)

Again, automatically-placed items will fill up the next available space, but we can hold down shift and drag something to manually place it anywhere.

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.

What if we want content to span multiple cells? Just click...and drag. That’s it. All we do is select the thing, and we click and drag.

Let’s talk responsive layouts. Generally, grids are automatically responsive. That means by default, they’ll take up the width of whatever they’re sitting inside. And as the browser gets narrower, everything will scale accordingly.

But if you want to change something in another view? Want to design for different devices? We can make that change. Even if we change the number of columns, and grid children set to auto? (If the children of a grid are automatically positioned?) They’ll wrap responsively just like you’d expect. Come back to desktop? Everything’s as it was.

That’s because changes cascade down, meaning when you change stuff on desktop, that affects tablet and mobile views. And things you add or change on tablet affect mobile. (There’s a pattern here.) Mobile landscape changes affect mobile portrait. And as we go down the different views, changes only affect smaller devices.

That’s responsively designing with grid.

So. We can add a grid just like any other element. We can drop things in a grid and they’re automatically placed. They’ll fill up empty space... unless, of course, you set something to manual, in which case you can get that child to do anything you want. Like parenting. Except not at all.

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 on multiple views to make sure it looks great on every device.

Now. We cover a lot more of this in our other content like auto-fit, the dense setting in grids — all of this is on Webflow University. So check that out if you haven’t already.

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