Columns gap

Customize the gap between the columns

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.

Default gap

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

<div class="columns is-gapless">
  <div class="column">No gap</div>
  <div class="column">No gap</div>
  <div class="column">No gap</div>
  <div class="column">No gap</div>
</div>

You can combine it with the is-multiline modifier:

is-one-quarter

is-half

is-one-quarter

Auto

<div class="columns is-gapless is-multiline is-mobile">
  <div class="column is-one-quarter">is-one-quarter</div>
  <div class="column is-one-quarter">is-one-quarter</div>
  <div class="column is-one-quarter">is-one-quarter</div>
  <div class="column is-one-quarter">is-one-quarter</div>
  <div class="column is-half">is-half</div>
  <div class="column is-one-quarter">is-one-quarter</div>
  <div class="column is-one-quarter">is-one-quarter</div>
  <div class="column is-one-quarter">is-one-quarter</div>
  <div class="column">Auto</div>
</div>

Variable gap #

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.

Gap: is-0 is-1 is-2 is-3 is-4 is-5 is-6 is-7 is-8

Side

Main

Three columns

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.

Breakpoint based column gaps #

You can define a column gap for each viewport size:

For example, here's how it looks with the following modifiers: is-variable is-2-mobile is-0-tablet is-3-desktop is-8-widescreen is-1-fullhd

<div
  class="columns is-variable is-1-mobile is-0-tablet is-3-desktop is-8-widescreen is-2-fullhd"
>
  <div class="column">Column</div>
  <div class="column">Column</div>
  <div class="column">Column</div>
  <div class="column">Column</div>
  <div class="column">Column</div>
  <div class="column">Column</div>
</div>

Column

If you want to see the difference, resize your browser and see how the columns gap varies.

Start Here

Features

Sass Tools

Customization

CSS Library

CSS Helpers

Sponsor