Webflow 101 Crash Course

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

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..
Intro
Intro
Core concepts
Core concepts
Intro to the designer
Intro to the designer
Webflow Grid 2.0
Webflow Grid 2.0
Intro to HTML & CSS
Intro to HTML & CSS
The FR Unit
The FR Unit
Grid vs Flexbox
Grid vs Flexbox
Web Structure
Web Structure
Grid examples
Grid examples
The Box Model
The Box Model
Element Hierarchy
Element Hierarchy
Spanning sparkling water flavors in a ROYGBIV grid
Spanning sparkling water flavors in a ROYGBIV grid
Navigator
Navigator
Element Basics
Element Basics
Element Panel
Element Panel