CSS Columns

TBG

Mixins, helper classes and extends for easy CSS columns

Basics

CSS columns can easily be applied to a containing element using the .css-columns-x class, where x is the number of columns needed.

<ul class="css-columns-3">
  <li>The first column</li>
  <li>The second column</li>
  <li>The third column</li>
</ul>

The first column
The second column
The third column

Responsive CSS columns

To apply a different number of columns at different breakpoints, append the breakpoint name to the .css-columns-x class (i.e. css-columns-2-large):

<ul class="css-columns-0-small css-columns-2-medium css-columns-4-large">
  <li>The first column</li>
  <li>The second column</li>
  <li>The third column</li>
  <li>The fourth column</li>
</ul>

The first column
The second column
The third column
The fourth column

Sass Reference

Mixins

We use these mixins to build the final CSS output of this component. You can use the mixins yourself to build your own class structure out of our components.

css-columns

@include css-columns($count, $gap);

Outputs CSS properties for CSS columns

Parameter	Type	Default Value	Description
`$count`	Number	`None`	The number of CSS columns
`$gap`	Number	`None`	The gap between CSS columns

css-columns-classes

@include css-columns-classes($class, $count, $gap);

Generates CSS columns helper classes (and extends) for a given column count

Parameter	Type	Default Value	Description
`$class`	String	`'col-'`	The base of the class name for each column count
`$count`	Number	`12`	The total number of classes (column counts) to generate
`$gap`	Number	`1rem`	The gap between CSS columns