カラム間のギャップ

カラム間のギャップをカスタマイズ

デフォルトのギャップ #

各カラムには、変数 $column-gap と等しいギャップがあります。これはデフォルト値が 0.75rem です。
ギャップはカラムの両側にあるため、隣接する2つのカラム間のギャップは $column-gap の2倍、つまりデフォルトで 1.5rem になります。

デフォルトのギャップ

ギャップなし #

カラム間のスペースを削除したい場合は、columns コンテナに is-gapless 修飾子を追加します。

1番目のカラム

2番目のカラム

3番目のカラム

4番目のカラム

<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>

is-multiline 修飾子と組み合わせることができます。

is-one-quarter

is-half

is-one-quarter

自動

<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>

変数ギャップ #

.columns コンテナに9つの修飾子の1つを追加することで、カスタムカラムギャップを指定できます。

is-0 はギャップを削除します（is-gapless と同様）。
is-3 はデフォルト値で、0.75rem の値に相当します。
is-8 は最大ギャップの 2rem です。

さらに、.is-variable を .columns コンテナに追加する必要があります。

ギャップ: is-0 is-1 is-2 is-3 is-4 is-5 is-6 is-7 is-8

サイド

メイン

3つのカラム

この機能は、CSS変数をサポートするブラウザでのみ利用可能です。

Sass設定がCSS変数をサポートしていない場合は、$variable-columns を false に設定することでこの機能を無効化できます。

ブレイクポイントベースのカラムギャップ #

各ビューポートサイズのカラムギャップを定義できます

たとえば、次の修飾子を使用すると、次のようになります。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>

カラム

違いを確認したい場合は、ブラウザのサイズを変更して、カラムギャップがどのように変化するかを確認してください。

ここから始める

機能

Sassツール

カスタマイズ

CSSライブラリ

CSSヘルパー

スポンサー

カラム間のギャップ