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 gapless modifier on the columns component:

First column

Second column

Third column

Fourth column

          
            <columns gapless>
  <column>No gap</column>
  <column>First column</column>
  <column>Second column</column>
  <column>Third column</column>
  <column>Fourth column</column>
</columns>

You can combine it with the multiline modifier:

one-quarter

half

one-quarter

Auto

          
            <columns gapless multiline mobile>

  <column one-quarter>is-one-quarter</column>
  <column one-quarter>is-one-quarter</column>
  <column one-quarter>is-one-quarter</column>
  <column one-quarter>is-one-quarter</column>

  <column half>is-one-quarter</column>  
  <column one-quarter>is-one-quarter</column>  
  <column one-quarter>is-one-quarter</column>  
  <column one-quarter>is-one-quarter</column>

  <column>Auto</column>

</columns>
          
        

Designed with by Aldi Duzha