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.

Grid

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

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

 

Flexbox

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