Getting to know containers

Hey, Carly here from the Wix Studio team. Today we’re zooming in on containers—one of the essential building blocks for planning your site layout. We'll talk about why they're important, how to use them in the Editor, and wrap up with some tips on how to integrate them into your planning process.

To demonstrate the importance of containers, let’s think about organizing a drawer.

Yes, you can dump everything inside without any separators or organizing containers. But then, when you add a new item to a messy drawer, or want to move items to a different, smaller drawer, there’s so much to sort through—it’s so time-consuming.

Just like with a drawer, you can simply drop elements onto your site without a container, and arrange them any way you like. For example, I’ll add a title, text box, and this arrow shape.

But now when I want to adjust, reposition, or add interactivity—doing it for each item separately takes too long.

So that's where containers come in—they are to a site what organizing containers are to a drawer. When it’s time to move items to a different drawer, you can simply move it all together.

Here you can see it in action. Now that the title, text, and button are all placed inside this blue container, I can simply drag it with all the elements at once.

It’s not just about keeping things organized—using containers and layout tools can also improve SEO and accessibility. When content is well-structured, search engines can index it more easily, and screen readers can navigate it better. So, let me break down how it works.

The sites you visit every day are built with containers. Like this site for example—can you see them?

There’s a concept in CSS and web design called the box model, which basically means every item on the site is placed within a box.

Containers are a representation of that. They help us structure the website and make changes efficiently.

They also create a relationship between elements. When we place an element inside a container, it becomes the child element and the container is its parent. For example, in this scenario, this container acts as the parent, with these two elements inside it serving as the child elements. This hierarchical relationship plays a role in determining the layout and positioning of these elements.

This container is also the parent of this element inside it.

Ok, so the container is the most basic layout tool for putting together compositions on your website.

To define the individual containers positioning and layout, we use padding and margins.

Padding is the space between the container's border and its inside, giving some breathing room around the content. This doesn’t affect the space outside the container or how everything is arranged around it.

Margins are the spaces outside a container's border. They create a buffer outside the container and prevent overlap with other elements, without changing the container’s size or the content inside it.

Ok, so now that we’ve covered that, let’s talk about the different types of containers.

We have quite a few in the Studio Editor.

Every page on your site is actually a container.

And every section is also like a container that stretches all the way across the width of the page. Just like you use different sections for different content, you can apply that same idea when breaking your website into smaller containers.

So the most basic container is the free-form container. You can either add it from the “add panel” and start placing elements inside.

Or, when you select multiple items arranged in both directions—horizontally and vertically—you'll see the option to place them in a container in the action bar.

We already discussed parenting—so as you can see here in the Editor, when you attach elements to a container, it becomes their parent, which defines how they’re structured. Once they’re attached, the child elements will always stay linked to the parent.

To detach a child element from its parent, just drag it outside.

You can visually see the hierarchical relationship in the Layers panel. ?Notice how the shape and image are nested inside the parent container, while the text isn't?

If I drag the text into the container, it becomes the child element of the container.

You can also see that the container is the child of the section, which is another container, like we talked about earlier.

Parenting is a change to the layout, and not the design, so it will show up across all screen sizes. Keep in mind that reparenting at one breakpoint affects all breakpoints.

Parenting doesn’t automatically create a relationship between child elements—they can still overlap at different breakpoints. Stacks and advanced CSS grids can solve this problem. We have a separate tutorial on CSS grids, so in this one we’ll only cover stacks.

A stack is another type of container that prevents overlap of child elements. And as you can see here, you can control the spacing between items, and the spacing will stay the same across breakpoints.

You can stack items in one direction, either vertically—or horizontally. Notice how this time, when we select elements that are organized on top of or next to each other, the action bar gives us the option to stack.

You can stack elements, or even other stacks. In this example, you can see how the title and text are stacked horizontally, and also vertically on top of the button.

When you stack stacks, you’re putting one container inside another. So you can look at the Layers Panel to see how the title and paragraph are the children of this stack , while this stack and the button are the children of this bigger stack.

We covered container types, but there are more layout tools that use containers as their foundation.

For example, a repeater is a group of containers that share the same design but can hold different content.

or a Flexbox, which is also a group of containers, but these can have different designs.

And when you use a section grid, each cell serves as a container within a framework of columns and rows. Great, now that we’ve covered container types, let’s move on to some tips for using containers.

When adding elements, I think about how they should be organized contentwise, whether in an existing container or a new one. For example, we'll place this button in this stack together with these elements because it’s part of the title.

The reason I chose the stack is that I don’t want them to overlap on different screen sizes, so think about the best type of container to use—free form, stack, or any of the other types we covered. Remember, elements will stay in the same containers across all breakpoints.
You can nest containers inside each other. In this example, there's a stack inside another stack, placed inside a repeater, inside a bigger stack.

Now that you know how containers work, I’m sure the drawer analogy makes more sense.

It’s a way for you to organize and manage your content, and even create more complex layouts.

And that’s it, good luck planning your next site.

For more tutorials like this, check out the Wix Studio Academy.