Columns

Use to split an element into multiple non-empty columns.

Description

For more fine tuned layouts, you can use the mixin and generate more complex layouts between custom breakpoints. This can be used together with breakpoints() mixin as it just generates the widths. The columns will live inside our page grid (more here: layout-patterns/page-grid). The mixin has to be applied on the wrapper of the columns. Adding a comma in the list will generate a new row.

Sass Usage

// columns mixin adds default padding to each column
@include create-columns(3 2 1);
// columns-with-no-padding mixin does not add default padding to each column
@include columns-with-no-padding(3 2 1);

Usage

Usage example

3
2
1

Code example

<div class="columns-example">
  <div class="u-page-grid">
   <div class="columns-example__content">
    <div class="columns-example__item">3</div>
    <div class="columns-example__item">2</div>
    <div class="columns-example__item">1</div>
   </div>
  </div>
</div>