--- title: Columns powered by Flexbox layout: documentation doc-tab: grid doc-subtab: columns --- {% capture columns %}
First column
Second column
Third column
Fourth column
{% endcapture %} {% capture columns_sizes %}

is-three-quarters

Auto

Auto

is-two-thirds

Auto

Auto

is-half

Auto

Auto

is-one-third

Auto

Auto

is-one-quarter

Auto

{% endcapture %} {% capture columns_offset %}
{% endcapture %} {% capture columns_mobile_centered %}

is-half
is-narrow

{% endcapture %} {% capture columns_mobile_multiline_centered %}

is-narrow
First Column

is-narrow
Our Second Column

is-narrow
Third Column

is-narrow
The Fourth Column

is-narrow
Fifth Column

{% endcapture %} {% capture columns_mobile %}
1
2
3
4
{% endcapture %} {% capture columns_desktop %}
1
2
3
4
{% endcapture %} {% capture columns_multiple_breakpoints %}
is-half-mobile
is-one-third-tablet
is-one-quarter-desktop
1
1
1
1
{% endcapture %} {% capture columns_nesting %}
First column
First nested column
Second nested column
Second column
50%
Auto
Auto
{% endcapture %} {% capture columns_multiline %}
is-one-quarter
is-one-quarter
is-one-quarter
is-one-quarter
is-half
is-one-quarter
is-one-quarter
Auto
{% endcapture %} {% capture columns_gapless %}
First column
Second column
Third column
Fourth column
{% endcapture %} {% capture columns_gapless_multiline %}
is-one-quarter
is-one-quarter
is-one-quarter
is-one-quarter
is-half
is-one-quarter
is-one-quarter
Auto
{% endcapture %} {% capture columns_narrow %}

Narrow column

This column is only 200px wide.

Flexible column

This column will take up the remaining space available.

{% endcapture %} {% include subnav-grid.html %}

Columns

A simple way to build responsive columns

To build a grid, just:

  1. Add a columns container
  2. Add as many column elements as you want

Each column will have an equal width, no matter the number of columns.

First column

Second column

Third column

Fourth column

{% highlight html %}{{ columns }}{% endhighlight %} {% include anchor.html name="Sizes" %}

If you want to change the size of a single column, you can use one the following classes:

  • is-three-quarters
  • is-two-thirds
  • is-half
  • is-one-third
  • is-one-quarter

The other columns will fill up the remaining space automatically.

is-three-quarters

Auto

Auto

is-two-thirds

Auto

Auto

is-half

Auto

Auto

is-one-third

Auto

Auto

is-one-quarter

Auto

{% highlight html %}{{ columns_sizes }}{% endhighlight %}

12 columns

As the grid can be divided into 12 columns, there are size classes for each division:

  • is-2
  • is-3
  • is-4
  • is-5
  • is-6
  • is-7
  • is-8
  • is-9
  • is-10
  • is-11

Naming

Each modifier class is named after how many columns you want out of 12. So if you want 7 columns out of 12, use is-7.

is-2

1

1

1

1

1

1

1

1

1

1

is-3

1

1

1

1

1

1

1

1

1

is-4

1

1

1

1

1

1

1

1

is-5

1

1

1

1

1

1

1

is-6

1

1

1

1

1

1

is-7

1

1

1

1

1

is-8

1

1

1

1

is-9

1

1

1

is-10

1

1

is-11

1

{% include anchor.html name="Offset" %}

While you can use empty columns (like <div class="column"></div>) to create horizontal space around .column elements, you can also use offset modifiers like .is-offset-x:

is-half
is-offset-one-quarter

is-4
is-offset-8

is-11
is-offset-1

{% highlight html %}{{ columns_offset }}{% endhighlight %} {% include anchor.html name="Centering columns" %}

While you can use empty columns (like <div class="column"></div>) to create horizontal space around .column elements, you can also use .is-centered on the parent .columns element:

is-half
is-narrow

{% highlight html %}{{ columns_mobile_centered }}{% endhighlight %}

Use with .is-multiline to create a flexible, centered list (try resizing to see centering in different viewport sizes):

is-narrow
First Column

is-narrow
Our Second Column

is-narrow
Third Column

is-narrow
The Fourth Column

is-narrow
Fifth Column

{% highlight html %}{{ columns_mobile_multiline_centered }}{% endhighlight %} {% include anchor.html name="Responsiveness" %}

By default, columns are only activated from tablet onwards. This means columns are stacked on top of each other on mobile.

If you want columns to work on mobile too, just add the is-mobile modifier on the columns container:

1

2

3

4

{% highlight html %}{{ columns_mobile }}{% endhighlight %}

Resize

If you want to see the difference, resize your browser and see when the columns are stacked and when they are horizontally distributed.

If you only want columns on desktop, just use the is-desktop modifier on the columns container:

1

2

3

4

{% highlight html %}{{ columns_desktop }}{% endhighlight %}

Different sizes per breakpoint

You can define a column size for each viewport size: mobile, tablet, and desktop.

is-half-mobile
is-one-third-tablet
is-one-quarter-desktop

1

1

1

1

Resize

If you want to see these classes in action, resize your browser window and see how the same column varies in width at each breakpoint.

{% highlight html %}{{ columns_multiple_breakpoints }}{% endhighlight %} {% include anchor.html name="Nesting" %}

You can nest columns to have more flexibility in your design. You only need to follow this structure:

  • columns: top-level columns container
    • column
      • columns: nested columns
        • column and so on…

The difference with multiline columns is the order in the HTML code: all the blue columns appear before the red ones. Resize to a narrower viewport to see the result.

First column

First nested column

Second nested column

Second column

50%

Auto

Auto

{% highlight html %}{{ columns_nesting }}{% endhighlight %} {% include anchor.html name="Multiline" %}

Whenever you want to start a new line, you can close a columns container and start a new one. But you can also add the is-multiline modifier and add more column elements that would fit in a single row.

is-one-quarter

is-one-quarter

is-one-quarter

is-one-quarter

is-half

is-one-quarter

is-one-quarter

is-one-quarter

Auto

{% highlight html %}{{ columns_multiline }}{% endhighlight %} {% include anchor.html name="Gapless" %}

If you want to remove the space between the columns, add the is-gapless modifier on the columns container:

First column

Second column

Third column

Fourth column

{% highlight html %}{{ columns_gapless }}{% endhighlight %}

You can combine it with the is-multiline modifier:

is-one-quarter

is-one-quarter

is-one-quarter

is-one-quarter

is-half

is-one-quarter

is-one-quarter

is-one-quarter

Auto

{% highlight html %}{{ columns_gapless_multiline }}{% endhighlight %} {% include anchor.html name="Narrow column" %}

If you want a column to only take the space it needs, use the is-narrow modifier. The other column(s) will fill up the remaining space.

Narrow column

This column is only 200px wide.

Flexible column

This column will take up the remaining space available.

{% highlight html %}{{ columns_narrow }}{% endhighlight %}

As for the size modifiers, you can have narrow columns for different breakpoints:

  • is-narrow-mobile
  • is-narrow-tablet
  • is-narrow-desktop