Bulmaのグリッドシステム(columns)のオプション

CSSフレームワークのBulmaには、Bootstrapのグリッドシステムと同じように、コンテンツを網目状の升目に配置して、WebサイトをデザインできるCSSクラスが用意されています。
グリッドシステムを使用すると、整然とコンテンツを並べて表示することができるので、整理されたイメージのサイトを作成できます。

Bulmaのグリッドには基本的なクラスに加えて、グリッドのセルのパディング(Gap)

今回は、Bulmaのグリッド(columns)を使用して、レスポンシブに対応する方法について紹介します。

BulmaをWebサイトに導入する方法については、以下の記事をご参照ください。

Bulmaを導入(インストール・CDNから参照)する
CSSフレームワークのBulmaを使うと、レイアウトやエレメント、フォーム要素などのスタイルを簡単に設定できます。また、Bulmaは...

Bulmaのグリッドシステム

Bulmaでグリッド状に要素を配置するには、columnsクラスとcolumnクラスを使用します。
columnsクラスはグリッドの行(row)に対応し、columnクラスが列(column)に対応します。columnsクラスを指定した要素は、columnクラスを指定した要素のコンテナになります。

Bulmaのグリッドシステム(columns)の基礎について知りたい方は、以下の記事をご覧ください。

Bulmaのグリッドシステム(columns)の基礎
CSSフレームワークのBulmaにはBootstrapと同様に、要素をグリッドのように格子状に配置するための仕組みが用意されています。 今...

垂直方向の中央配置

列を垂直に中央に揃えるには「is-vcentered」クラスを「columns」クラスを指定したコンテナ要素に追加で指定します。

is-vcenteredクラスを指定した場合

「is-vcentered」クラスを指定すると、垂直方向に要素が中央に配置されます。

ブラウザーでの表示

Bulma グリッドオプション 垂直方向に中央配置

is-vcenteredクラスを指定しない場合

「is-vcentered」クラスを指定しない場合は以下のようになります。
「is-vcentered」クラスを指定した場合と見比べてみてください。

ブラウザーでの表示

Bulma グリッドオプション 垂直方向の配置指定なし

水平方向の中央配置(列の中央揃え)

ブラウザーでの表示

Bulma グリッドオプション 水平方向に中央配置

複数行(列の折り返し)

「columns」クラスを指定したコンテナ要素内で、「column」クラスを指定した列要素を折り返して複数行で表示するには、「is-multiline」クラスをコンテナ要素に追加で指定します。

ブラウザーでの表示

Bulma グリッドオプション 複数行配置

列の複数行配置(列の折り返し)は、列の中央揃えと合わせて指定することもできます。

ブラウザーでの表示

Bulma グリッドオプション 複数行列中央配置