You are viewing the legacy dashboard. To explore the new dashboard click here * Please note that the new dashboard will not display your existing sites until they are migrated.

Flex: Grid, Containers and Flexboxes

  1. Home
  2. Knowledge Base
  3. Flex
  4. Flex: Grid, Containers and Flexboxes

There are three main areas to work within Flex: the Grid, Containers and Flexboxes. This article will discuss the differences between them, and when to use one instead of another.

As a general rule, if you want to create a freestyle composition with overlapping elements, use a Container. If you want to use an automatic layout that includes ordering items in a horizontal or vertical list, use a Flexbox.

Sometimes, there is no right or wrong answer, and there are several ways to achieve the same design goal. For example, whtn you have the same background (image/color/border) for a single object.


Place items directly on the grid when you want items to overlap relative to a card or composition. For example, overlapping a title on images.


Containers are best used for free-form compositions. Use containers when you want to include non-linear compositions or overlapping objects.



Flexboxes should be used when you want to create an automatic layout where items are ordered in a horizontal or vertical list. Additionally, you should use Flexboxes when you have elements that are intended to be placed one after the other, like multiple buttons, labels, logos, etc.


Related Articles

Join Now