Grid

CSS grid is an incredibly versatile layout tool that's used by both frontend developers and designers to build anything from basic structures to entire websites. If you're able to draw a grid around a layout, chances are its built using CSS grid.

And grids on the web work as guides. It works the same way as arranging apps and widgets on iOS, you can move and push things around, and the other items inside will be guided by columns and rows.

In this lesson, we will create and configure a grid in Webflow, 

we'll show how to next content inside of grid cells. We’ll also cover manual positioning to overlap content within a grid, and finally, we’ll cover making grid layouts responsive to work on different devices: like tablet, mobile landscape, mobile portrait, and Vision Pro.

Let's get into the first part. You can create a grid out of anything. Well, almost anything. Section? Check. Div block? Check. Collection list with dynamic CMS content? Also check.

Now, how do we use grid? Here's a Div block centered inside a section. Over in the Style panel, let's set it to grid. And now we can just drag elements inside. 

By default, the cells will get filled from the top left and continue to fill the next available cell. When you hit the end of that row, the element will automatically wrap to the next row to fill the next cell. In fact, if you have more elements than cells inside a grid, rows will automatically be created.

Now let's start configuring our grid.  With the grid selected in the Style panel, you can edit the number of columns and rows.  

And even though there's content inside those cells, if you delete columns and rows? It will not delete the content inside, but it will push things around depending on the number of columns.

Because grids on the web are guides, they're different from spreadsheets like Google Sheets, where deleting columns and rows deletes content inside of them.

But let's add some more columns and rows back, because if you want to place an element in the bottom row? It doesn’t work and this is expected behavior. Because, by default, elements in a grid are set to auto position. If we set it to manual position, now we can move this element anywhere inside the grid.

But let's undo that, because here in the Style panel again, you can enter the edit grid mode which gives you even more grid configuration controls.

You can edit the spacing inside your grid. Hover over the gap of any rows? You can click and drag to adjust the row spacing. 

Same thing for adjusting the column spacing.

And if you hold down Shift on the keyboard, you can adjust the spacing for both the rows and columns all at once. Next, we can also adjust the size of the columns. We can do this right on the canvas.

Speaking of which, you'll notice each of these columns are sized to 1 FR: one fractional unit. We can right-click on each column and change it to any unit we want - pixels, percentages, EMs, REMs, kilos, but FR units are magical because they do the math for us.

Here we have four columns each set to 1 FR. That means each will take up a fourth of the width of the grid. And if we go up and delete a column? Now we have three columns each set to 1 FR, meaning each column takes up one third of the grid. 

If we set one column to 2 FR? Now the column is twice the width of the column set to 1 FR: everything is scaled automatically. And FR units will also account for changing the grid gaps, so
no worries there.

But are FR units actually agic? Well, FR units use math, and math is science and science can be magical. So in conclusion, FR units are indeed magic.

At any time, you can exit edit grid mode by pressing Escape on the keyboard, or you can click the button that says "Done".

That’s everything when creating and configuring your grid. But our design isn't exactly practical - there aren't many designs that look like this. Because if you haven't noticed, there's only one element per cell. And if you try to add more than one element in a cell, it just pushes them around.

You could set each element to manual position, and then put them all in one cell, but its not really

[Meg] Yeah, that looks really sh-

[Sara] Shifting gears to the next chapter: nesting content inside a cell.

[Meg] I was gonna say "shrivelled"

[Sara] As we saw a moment ago, cells inside a grid can only hold one element at a time, because they're not containers. So, to add multiple elements to one cell? We use a Div block. And here's how that works: The Div block will take up that cell, but now you can nest other elements inside that Div block.

And here's how to do that. So this is our grid, and we want to nest our content inside this first cell. First, let's add a Div block and place it into our first cell. Then on your keyboard, holding down Command on Mac or Control on Windows, click and drag the first element inside the Div block to nest it. 

The most precise way to nest elements is to use the Navigator, making sure its a child of the Div block. But another way, with our Div block selected you can also use Quick Find to nest elements including components inside quickly as well.

And with our content nested inside, we can align content however we want. Now. What we just did was align the direct grid children elements, not the elements inside the Div block.

So keep that mind when aligning all of the content inside your  grid. If you only want to align the nested content inside the Div, then you want to apply something like Flexbox to that Div. From there, you can align and justify your content however you want.

That’s how to nest content inside a grid cell. What about manual positioning to overlap content within a grid?

We know that manually positioning your grid child element let’s you place it anywhere in the grid, but you can also use manual positioning to overlap content to create any kind of layout you want.

For us? Let's build this hero section where the hero image takes up the full section, but the content is overlapping. From the Add panel, let's first drag in a section and place it at the top of the page right underneath the navbar. We'll set the section's minimum height to 70 VH, 70 percent of the viewport height and we'll also set the display setting to grid. By default, its a 2 by 2 and that's what we want. Let's also remove the gap between the cells, since we want this to be a perfect 50/50 split.

Now that we configured our grid, we can bring in our hero image from the Assets panel dropping it anywhere in our grid section. By default as we know, it goes in the first available cell: the top-left cell in our grid. And we want our image to take up the full space available.

So how do we do that? First, with our image selected, we can set the width and height to 100%, meaning it will take up 100% of the cell. Second, we can set the fit, the object-fit, to cover. Now the image is covering to fit within its cell. Next, we can click on the corner here to span our image to take up two rows.

But we're not done adding our content, so with our grid selected we can move fast here and use Quick find, Command K on Mac, Control K on Windows, to add a Div block to fill the next available cell. And I can use Quick find again, to nest inside my Div: a Heading element, a Paragraph element, a Button component we made off-screen, and a command to remotely turn off Meg's laptop pretending its yet another macOS update.

[Meg] So it was you.

[Sara] Now we have our hero content inside our grid, and we can use flexbox on the Div to vertically align our content to the center, justified to the left. And this looks okay, but we came here to make an overlapping layout. So with our image selected, we can set it from auto to manual position. And we can span it across two columns, so now this image will maintain its span  and manual position - no matter what.

But because our Image is taking up the whole 2 by 2 grid, now the Div block with our content, got knocked to the next row that was automatically created.

And that's because its position is set to auto. It automatically positioned itself to fit in the next available cell. 

So let's set its position to manual and a fast way to do that is to hold down Shift on the keyboard and drag it to where we want it to be. Now, like the image that's also set to manual the Div will maintain its manual position as expected. Let's give it a background color, so we can actually see our content over the image.

Is it amazing? No, but almost.

Notice how the height of the second row is not half of the grid anymore. That's because we also have the height of the content inside our Div block. And if we go in to configure our grid, our rows are sized automatically.

So we could go in and size each row to be 1FR - we can use fractional units here for both rows to get that 50/50 split again.

But we could also set the bottom row to Auto, meaning the height of the row will be determined only by the content inside. And when we do? We can exit out of the grid and add breathing room inside our Div block, adding padding on all four sides at once.

That's using manual position to create overlapping grid layouts, but before we move on, one, last important note.

You'll notice that when we spanned our image and

we manually positioned our elements, a pink label appeared. A pink label means a specific property is set to this grid child element.

Here's another example: we have a grid with images that all have the same class. If I select an image in a grid and span it? Pink label. But! The other images are not spanned as well, because this span only applies to this element it does not apply to the class.

Now that that’s out of the way, let's move onto the final part: responsive design with grid.

Grids are, by default, responsive. Because each column's width is sized using FR units, it will respect those proportions as well as the content inside. And even as the browser gets smaller, everything will scale responsively.

But what if you want to change something in another breakpoint in another smaller device like tablet? Let's go in and change the number of columns to fit better in the viewport. If the children of a grid are automatically positioned, they'll wrap responsively just like you’d expect. Again, content won't be deleted because grids are guides. We can adjust our content so it fills up the grid and if we go back to desktop? Everything’s as it was.

That’s because style changes cascade down from desktop from the base breakpoint. This means changes on desktop cascade down to tablet, mobile landscape, and mobile portrait. And changes on tablet cascade down to mobile landscape and mobile portrait.

Changes on mobile landscape cascade down to mobile portrait.

And you guessed it: changes on mobile portrait only affect mobile portrait. As we go down the different breakpoints, changes only affect smaller devices.

But, what if something is set to manual position? If you remove a column, and something was placed there manually, it will stay that way until you manually change it on another breakpoint. So you have to either manually place it in a new column, or set its position to auto.

But something else to consider is when you manually position an element in a grid, it does not affect its document order. This is super important for accessibility because you still want to make sure your content flows in the direction you want it to. So make sure to first set the grid content's logical order in the Navigator before making visual adjustments.

And that's it. Let's do a quick recap of our main takeaways with CSS grid:

You can create a grid out of almost anything and placing elements inside will fill the next available cell unless you set an element's position to manual. Because grid cells only hold one element at a time, you can use something like a Div block to nest multiple elements inside a cell.

You can overlap content inside a grid by setting its position to manual. That’s what the pink label means. And finally, you can make grids responsive: a grid layout might work great on desktop, but removing some columns would look better on smaller devices.

Now. These are just the basics of how grids work on the web, and Webflow University has even more topics about grid.  We even have a full lesson on Webflow's Quick Stack element, which is just a grid pre-populated with Div blocks already set to flex, so you can build common web layouts even faster.

But that's an overview of grid in Webflow.