Columns

The Columns system provides a simple way to create balanced column layouts that look great on the device. For more complex layouts, check out our Grid system. You can use both systems together - the Columns system for your overall layout, and the Grid system within columns when you need more layout control - or use either system independently.

Basic Column Layout

The basic column layout is flexible - you can add as many columns as needed depending on your content needs.

1

2

3

Columns

<div class="columns">
  <div class="column">
    {{ Content for column 1 }}
  </div>
  <div class="column">
    {{ Content for column 2 }}
  </div>
  <div class="column">
    {{ Content for column 3 }}
  </div>
</div>