Creating a layout with section grid

Creating a site layout is like laying a foundation for a building. It has to be solid enough to support everything else. On Wix Studio, section grid is is our foundation for how we lay out responsive sites.

Hi, Carly here from Wix Studio. Let’s take a look at when to use section grid in your designs, and how to use it to build fully responsive layouts.

We use the grid when we want to break up designs into smaller areas—like in this one which has that trendy, bento box layout where each section has unique colors, content and animations.

Or here, where this section has a sort of collage layout on desktop, but it’s rearranged into rows on mobile.

And this design as well, which is broken up into an actual grid.

So, you see the idea. You can use the grid to divide up a section into smaller parts—which we call cells—and then lay out our content within each cell.

And there are a few reasons why structuring things this way can be a good idea.

• Firstly, you can easily adjust the grid to get the right layout for each breakpoint,

• You get more control over how elements are positioned from one screen size to another

• You can divide up sections into balanced, precise proportions

• And you can arrange site content with a structure that supports SEO and accessibility Design for every breakpoint Control element positioning Create precise proportions Better accessibility and SEO

Before we jump right into using the grid, let’s get into the background logic. 

Each blank section on Studio is a one-cell grid.

You can split up that one cell into multiple ones, and keep dividing each new cell again and again until we have the layout we want with multiple cells within the section.

So that now there are multiple cells, which are containers, within the section, and you can control each cell to achieve any layout you want.

When we create a grid layout, behind the scenes there’s a CSS grid made up of columns and rows.

Section grid cells are containers that have been placed within the columns and rows. They can fit like this within on column and row, or they might cover a larger area, like 2 rows of one column.

You can keep splitting this up into more and more cells, resize or merge them however you like. And in the background things are readjusting within that framework of columns and rows.

Once you’ve got the layout you want, you can start placing elements inside each cell, and align them there. And, you can easily swap things around to experiment with different layouts.

Then on smaller breakpoints, we can keep the same content but just rearrange the grid layout. For example, on mobile we might want to use rows.

Now that you’ve seen the logic, let me show you how to build a section with section grid.

Here we go. We’ve got our blank section, and from this dropdown we can choose a grid layout.

…or we can start with any of these options from the Add panel. Let’s choose this one.

I’ve got a 2-column grid. I can divide up this space further by splitting the cell in half, either horizontally or vertically.

I can drag from here to resize the cells.

But if I want the cells to have the same width or height, I can head to the Inspector and equalize them.

From here, I can see the sizes of the columns and rows in the grid.

And if you want to be precise, you can adjust them from here.

Right now I can’t change which units the grid is sized in—that’s determined by the responsive behavior I have set for the section. We’ll dive into how to customize the sizing later on.

I’ve got my layout, now I can design these cells like any other container. 

Because they are containers. So I’ll add background colors…

…and I’ll give them rounded corners. To do this quicker, I’ll multiselect them and adjust the corners all at once.

Now it’s time to add content. All I need to do here is open the Add panel and drag in what I need. So I’ll bring in a title, paragraph and a button to this top left cell.

And because I have all these elements within one cell, I’ll stack them so they don’t overlap.

Now I’ll center this Stack.

And add some images to the other two cells.

I’ll need to add the rounded corners to the images as well, so I’ll multiselect again and change that.

I think I want a bit of breathing room between the cells, so I’m going to add gaps as well. A bit of the background shows through when I do that.

I’ll also create some space around the outside of the cells by adding padding to the section. This creates a buffer between the edges of the section and the cells inside.

If you want to swap cells around, you can multiselect them and click “swap.”

Or you can drag cells around to reposition them.

You can flip the columns and rows from the Inspector as well—like this.

But I prefer what I had at the start, so I’ll go back.

Okay, so the grid is set up on desktop. Now let’s look at it on the tablet breakpoint.

Everything scaled proportionally, so it looks pretty good. I’ll set this paragraph so the text wraps. And I think the text and button can be a little bigger…there we go.

Time to check things out on mobile.

It scaled down again, but at this screen size things are looking too crowded. 

Probably not the best layout here.

I’ll change it so visitors on mobile can get the best experience. I can just switch up the layout from here. Rows are a good choice for mobile.

When you change the grid layout, Studio automatically rearranges and optimizes it for you. You can also make some more changes, like making the section itself taller and adjusting the row heights. You can reorder the cells, and change the gaps—all without messing up the other breakpoints.

When I grab from this blue arrow, I can resize the the row and push the height of the section. It doesn’t affect the height of the other cells.

But if I want to keep the section height and adjust the proportions of the cells, 

I can drag from any of the edges that aren’t the blue arrow.

Okay, I mentioned earlier that the section grid sizing is determined by the section’s responsive behavior. Right now, I can’t change the units here.

When I resize, the columns and rows scale together. But sometimes, I might want them to behave differently.

For example, I want the left column to only size down to a certain point so it’s not getting too small. But the right column can continue to get smaller.

So I’ll switch on advanced sizing, to take more control and create that behavior.

There are different units for me to choose from. I’ll keep the columns set to fr, which is a fractional unit.

Fr represents a fraction of the space that’s available. So, for example, if I want the column to the right to be twice the size of the column to the left, I can set the right column to 2 fr, and the left column to 1 fr.

I also want to make sure the left column only scales down to a certain size—so for that, I’ll set it to Min/max.

The maximum can stay 1 fr like I set before, but I’ll set a minimum size of 380 pixels so it doesn’t get any smaller than that.

Now when I resize, the two columns keep the same proportion from before until the smaller one hits 380 pixels. Then it stops resizing, and only the right column changes.

I can control the sizing like this at any breakpoint. Like here on mobile, this top row scales up but its getting too big for the content inside.

So I’ll give it a maximum size. I’ll set it to Max content, which means the height of the row is determined by the height of the content inside.

I’ll also add some padding to the cell to create space between the edges and the content inside. Because the row is set to Max content, it takes this into account.

Perfect, now when I resize the height of this row doesn’t get too big, but the other rows still scale.

There are even more ways to customize the sizing. Let’s set the height of the section itself to 100 viewport height, which means it fills the height of the viewport.

Then I can set the proportion of space each row takes up. I’ll set the bottom rows to 1 fr each. So the remaining space minus the height of the first row is split in half.

Now when I resize, the first cell changes based on the content inside, and the rest of the space in the viewport is filled by the other two rows.

Now for a final look across breakpoints. My content is laid out the way I want at each breakpoint for the best experience on every screen size.

So that’s how to lay out your site with Section Grid, and get really custom with advanced sizing. For more tutorials like this one, check out the Wix Studio Academy.