Columns ​

The columns layout provides a set of classes to arrange content in a responsive CSS grid.

Columns use CSS Grid to size columns automatically and keep them aligned across rows. If you need more control over the width of each item, use Flex columns.

Base class ​

The .columns class puts a container's direct children in a grid with three columns by default. The grid will responsively use fewer columns if there isn't enough room.

Column count and width ​

Use .count-1 through .count-12 on the container to set how many columns the grid should fit when there's enough room.

When there are fewer items than columns, the occupied columns stretch to fill the unused space. Add .fixed to keep them at their calculated width.

Column spans ​

Use .span-1 through .span-12 on a direct child to set how many columns it spans.

Responsive variants ​

A screen-size prefix applies a class at that breakpoint and above. Use prefixed count and fixed classes on the container, such as md:count-2 or md:fixed, and prefixed span classes on the grid item, such as md:span-2.

Use count-2 lg:count-3 to set two columns by default and three from the large screen breakpoint. A grid can still stack on a wide screen because Graupl applies a single-column fallback inside query containers up to 575px wide. A responsive span such as md:span-2 can override the fallback for that item.

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 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 columns layout:

Sass variables ​

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