How to set up a Container for your next Webflow project

Container Base Classes

Base Container

Our container has a class of Container.

• The container will be set to be 100% Wide
• Container usually has a Maximum Width of 1328px (Changing per project)
• Container has 24 px margins from left and right so we can avoid having the container reach edges of the screen. (Changing per project)

The base Container class never has any flex or grid settings applied to it.

This is to avoid messing up the layouts on the additional class if we do decide to use a different style later on.

Based on the project we are building, the section can have different Max Width and have different Margins from Left and Right to accommodate different designs.

Also from time to time, we need to adjust the Max Width of the Container on larger brake-points. In that case we’re sticking to the guide that clients/designers usually provide.

We’re trying to avoid adding unnecessary brake points as much as possible.

We’re trying not to add any other CSS to the base container and keep it as clean as possible to not cause conflicts later on.

Unique Containers

As the project might have some off containers, like fluid containers for the hero sections, it is best to create a unique class for those types of instances.

Depending on if the Unique Container is Page Specific or Component Specific we’re going to give it a class of:

1. {Page Name} Container
2. {Component Name} Container
   

This way we can create for an example a Hero Container that is used for all hero sections in the project. Great example of that is here:

In this case, all of our pages have a wider Hero Container than all of the other containers. This way we don’t have to create unique classes for it on each page and we can reuse it time and time again.

If we’re sure how the container is going to be used, we can add as much of custom CSS as we want to it, as the only utility class we’re going to be adding to Hero Container is to change the BG Green 200 or similar.

Any other changes would require us to go ahead and create a new class.

Navigation Container

As the nav usually has a unique set up, we are creating an additional Nav Container that we can place in the navigation.

It is usually the same as the base Container class, but as from time to time it can differ it’s safest to have a unique class for it.

Adding Classes to the Container

We avoid adding combo classes for the Unique Containers and always avoid adding combo classes for the Navigation Container, the only place where we do use combo classes is the base Container.

Grid

Flow Ninja Unlimited comes with an combo class of grid:

• Container Grid
  

The Grid combo class is applying a grid element to the Container.By default the Grid combo class has

• Desktop: 12 Columns, 24 Gutter
• Tablet: 12 Columns, 24 Gutter
• Mobile Landscape & Mobile: 6 Columns, 12 Gutter
  

Desktop:

Tablet:

Mobile Landscape & Mobile:

The Grid combo class been an absolute game changer for us. As this way we can create pixel perfect designs that match the Figma set up 100% and also develop Desktop to Mobile variants much quicker and easier.

We also have a unique set up for adding Column to the grid, so you can read more about our Column class here.

When not to use the grid class?

From time to time we’ve seen some instances where using the Grid combo class can cause problems. Those are:

1. Never use a Grid Utility Class if the layout can be achieved with just Container or Container Flex Center example here:

Example of just Container

*Elements stacking one below each other and the tab component below

Example for the Container Flex Center

Flex Classes

Apart from applying the Grid class to the container, we can also flex the items. Classes used for that are:

1. Container Flex Left → Applying Vertical Left & Top Alignment
2. Container Flex Center → Applying Vertical Center & Top Alignment
3. Container Flex Right → Applying Vertical Right & Top Alignment
   

We are never using Horizontal Flex on a Container class. Usually these layouts can be done by applying the Grid class and positioning elements in the grid or by creating a Component Class.