Bulma Doc ( Columns ) を読んだ

Bulma Columns を読んだ。

Bulma は Flexbox を使ったレスポンシブ対応のカラムを持っている。このカラムを使うには、親要素に .columns を指定して、その子要素に .column を指定する。

カラム幅を指定するには Modifier クラスを使う。たとえば、3 つの要素が .columns に内包されていて、内 1 つに .columns.is-half を指定するとその要素は親の半分の幅を持ち、それ以外の要素は余った幅を均等に分け合う（自動的に幅が決まる）。よくある 12 カラムで要素の幅を指定したいときは、.columns.is-1 のように指定する。また、オフセットや、Narrow オプション（ .is-narrow も用意されている。Narrow オプションではブレークポイントと同じ固定幅を指定できたりする。

レスポンシブ用の Modifier クラスもある。モバイルのブレークポイントで適用したいカラムがあるなら、親要素の指定を .columns.is-mobile とする。同じように、もしデスクトップのブレークポイントで適用したいカラムがあるなら、親要素の指定を .columns.is-desktop とする。あと、ブレークポイントで幅を変化できるのは親要素だけではなく、子要素にも個別に指定できる。.column.is-half-desktop のように。

カラムはネストできる。.columns .column .columns .column はひとつのカラムに別のカラムが内包されているが、こういうことが可能。

カラムの子要素の余白（ Gap ）も変更可能。この余白は $column-gap 変数で定義されており、デフォルトは 0.75rem 。これを変更すると余白が変えられる。余白を全くなしにするには、親要素で .columns.is-gapless を指定する。

あとはカラムを中央寄せにするとか、いくつか オプション がある。