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.
