---
title: Columns gap
layout: documentation
doc-tab: columns
doc-subtab: gap
breadcrumb:
- home
- documentation
- columns
- columns-gap
---
{% capture 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.
{{ columns_default_gap }}
{% include elements/anchor.html name="Gapless" %}
If you want to remove the space between the columns, add the is-gapless modifier on the columns container:
You can combine it with the is-multiline modifier:
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 content/klmn.html %}
You can define a column gap for each viewport size:
For example, here's how it looks with the following modifiers: