Figuration v4.4 is now available!

Containers

Containers are a base layout block to provide spacing and alignment for content within a given viewport.

How They Work

Containers are the most basic layout element in Figuration and are required when using the grid system. Containers are used to contain, pad, and (sometimes) center the content within them.

While containers can be nested, most layouts do not require a nested container.

There are three different container types available:

  • .container, which sets a max-width at each responsive breakpoint
  • .container-fluid, which is width: 100% at all breakpoints
  • .container-{breakpoint}, which is width: 100% until the specified breakpoint

See them in action and compare them in our Grid example.

The table below illustrates how each container's max-width compares to the original .container and .container-fluid across each breakpoint.

Extra small
<576px
<36em
Small
≥576px
≥36em
Medium
≥768px
≥48em
Large
≥992px
≥62em
Extra large
≥1200px
≥75em
.container 100% 544px (34rem) 720px (45rem) 960px (60rem) 1152px (72rem)
.container-sm 100% 544px (34rem) 720px (45rem) 960px (60rem) 1152px (72rem)
.container-md 100% 100% 720px (45rem) 960px (60rem) 1152px (72rem)
.container-lg 100% 100% 100% 960px (60rem) 1152px (72rem)
.container-xl 100% 100% 100% 100% 1152px (72rem)
.container-fluid 100% 100% 100% 100% 100%

Base Container

Use .container for a fixed-width container with a defined max-width per breakpoint.

<div class="container">
<!-- Content here -->
</div>

Fluid Container

Use .container-fluid for a full width container, spanning the entire width of the viewport.

<div class="container-fluid">
...
</div>

Responsive Containers

Responsive containers allow you to specify a class that is 100% wide until the specified breakpoint is reached, after which we apply max-widths for each of the higher breakpoints. For example, .container-sm is 100% wide to start until the sm breakpoint is reached, where it will scale up with md, lg, and xl.

<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>

Sass Reference

Variables

The available Customization options, or Sass variables, that can be customized for containers.

Name Type Default Description
$enable-container boolean true Enable the generation of the grid layout classes. Smaller segements of the grid layout classes can be disabled with the following $enable-* variables.
$enable-container-responsive boolean true Enable the generation of the responsive container classes.
$responsive-container-breakpoints list map-keys($grid-breakpoints) Subset of breakpoints to generate responsive container classes for.
$container-max-widths map
(
    sm: rem(544px),
    md: rem(720px),
    lg: rem(960px),
    xl: rem(1152px)
)
Grid breakpoints widths. The rem() function converts a pixel value to a rem value.

Mixins

Here are the mixins related to containers that we use to help generate our CSS. You can also uses these mixins to generate your own custom components or utilities.

make-container

Create a container element.

@include make-container($padding-x: $container-padding-x);
Argument Type Default Description
$padding-x number $container-padding-x Horizontal padding for a container.