Flex columns ​

The flex columns layout provides a set of classes to arrange content in rows with Flexbox.

Flex columns use numbered widths on a 12-unit scale, similar to Bootstrap's grid. However, Bootstrap creates gutters with padding on each column, while Graupl uses the CSS gap property to space items apart. Flexbox sizes each row independently, so the gaps can fall in different places from row to row. Use the Columns layout when gaps need to line up across rows.

Base class ​

The .flex-columns class puts a container's direct children in a row. The items can grow to fill the available width and wrap onto another row if there isn't enough room.

Column widths ​

Use .col-1 through .col-12 on a direct child to size it in twelfths of the container's width, with room for the gaps between items. Add .fill alongside the width class to let an item grow into the space left on its row.

Responsive variants ​

Use a screen-size prefix on the item to change its width at that breakpoint and above. With col-6 lg:col-4, an item uses six units by default and four from the large screen breakpoint.

Graupl applies a single-column fallback to unprefixed width classes when the flex container is up to 575px wide. A responsive width class such as lg:col-4 can override that fallback.

See responsive utility classes for the available prefixes.

Variants ​

By default, no theme variants are generated.

If you are compiling your own version of Graupl, you can set the flex columns module’s $themeable variable to true to generate the .primary, .secondary, and .tertiary variants.

Custom Properties ​

The following custom properties can be used to customize the flex columns layout:

Sass variables ​

The following Sass variables can be used to customize the generation of the flex columns layout: