September 23, 2019
CSS grid: release 2.0 — grid-based layouts in Webflow

CSS grid: release 2.0 — grid-based layouts in Webflow


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 4×4: 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.

34 thoughts on “CSS grid: release 2.0 — grid-based layouts in Webflow

  1. WOW! I had yet to try Grid in Webflow. Now that it's acquired this level of utility I am definitely looking forward to playing around with it real soon. Great job. Congratulations to everyone involved.

  2. I'm not even sure which i'm coming here for anymore, the amazing updates or the amazing commentary/jokes.
    Whoever is writing the scripts for these just know I love and appreciate you.

  3. Has there been any changes to the auto-generated ids at all – bespoke being affected by many ids #w-node-def707ceec93-f785e98c for example – I have 160 #w-node- ids in my css file on a reasonably sized project that's a bespoke complex app. Under the hood it's just not that pretty handing it over to the developers. Any news on this front would be good thanks, regards, [email protected]

  4. That's cool. Can Webflow's grid function support current IE browser now?… I just creating a web with Webflow without grid because I afraid the IE problem…

  5. These scripts! These edits! I both love and envy you, you amazing and beautiful creatures of the video team @Webflow. The features are cool too, I guess…

  6. I've completed a ton of video courses and training over the years, and whoever the guy is that narrates Webflow's training, is hands down the best instructor I've ever come across. Webflow's free courses are just incredible. It's one of the best selling points for the platform. Anyways, great work, whoever you are in the Webflow videos—and also kudos to the course creators.

  7. We need a larger breakpoint! Current one isn't big enough (hence the laptop icon and not a desktop screen?)

  8. Maybe stupid question, but I wonder if grid is not bad for SEO performance, compared to if you use no grid system for the same website?

    Because in 2012, websites that had frames that look like a grid system were very bad for your SEO performance.

    What is you all experience with Webflow grid system and SEO performance?

    And is Grid 2.0 the best way to create responsive website or is other webflow tool better?

  9. Amazing and really appreciate that I can now "clone" these projects to check what we do when following tutorials against the original webflow design. Thank you Webflow team

  10. For some reason, my grid stopped working correctly. I can no longer drag or place items directly into different grid boxes. Everything tries to go into row 1, column 1. I haven't changed any settings and iv never had this issue before.

    edit: just found out that now you have to change grid settings to "manual" or Drag & hold Shift or change position to manually and move

  11. For some reason, my grid stopped working correctly. I can no longer drag or place items directly into different grid boxes. Everything tries to go into row 1, column 1. I haven't changed any settings and iv never had this issue before.

  12. @4:16 – sorry guys, resizing grid cells does not work. I am certain I'm grabbing the little white circular handle in the bottom right corner and definitely not the square resize handle of the image inside the grid cell.
    I'm trying this with Lightboxes in the grid cells.

    https://preview.webflow.com/preview/pfss-2019-2?utm_medium=preview_link&utm_source=designer&utm_content=pfss-2019-2&preview=bb56343e124e2aec369d8bf770388f1c&mode=preview

Leave a Reply

Your email address will not be published. Required fields are marked *