--- title: Columns gap layout: documentation doc-tab: columns doc-subtab: gap --- {% capture columns_default_gap %}

Default gap

Default gap

Default gap

Default gap

{% endcapture %} {% capture columns_gapless %}
No gap
No gap
No gap
No gap
{% 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 %} {% include subnav-columns.html %}

Columns gap

Customize the gap between the columns

{% include anchor.html name="Default gap" %}

Each column has a gap equal to the variable $column-gap, which has a default value of 0.75rem.
Since the gap is on each side of a column, the gap between two adjacent columns will be twice the value of $column-gap, or 1.5rem by default.

{{ columns_default_gap }} {% 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="Variable gap" %}
Experimental
New 0.5.2

You can specify a custom column gap by appending one of 9 modifiers on the .columns container.

  • is-0 will remove any gap (similar to is-gapless)
  • is-3 is the default value, equivalent to the 0.75rem value
  • is-8 is the maximum gap of 2rem

Additionally, .is-variable should be added on the .columns container.

{% include klmn.html %}

This feature is only available in browsers that support CSS Variables:

If your Sass setup doesn't support CSS Variables, you can disable this feature by setting $variable-columns to false.