Bulmaのグリッドシステム(columns)の基礎

CSSフレームワークのBulmaにはBootstrapと同様に、要素をグリッドのように格子状に配置するための仕組みが用意されています。
今回はBulmaを使ったグリッドシステムについて、基本的な使い方を紹介します。

Bulmaを知らない、またはBulmaを導入したことがない人は、以下の記事を参照してください。

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

Bulmaのグリッドシステム

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

ブラウザーでの表示

Bulma グリッドシステム 横 769px

columnsクラスが指定された要素内に配置されたcolumnクラスが指定された要素は、等間隔に分割されて配置されます。

columnsクラスを指定した要素を20個配置

ブラウザーでの表示

Bulma グリッドシステム 20列指定

columnsクラスとcolumnクラスを使用したグリッドシステムで配置した要素は、ブラウザーの横幅が768px以下になると改行されて縦に並びます。

ブラウザーでの表示

Bulma グリッドシステム 縦 改行 768px

columnsクラスを指定した要素を並べると、複数行のテーブルのようなスタイルになります。

縦3行、横3列に配置したグリッド

ブラウザーでの表示

Bulma グリッドシステム 縦3行 横3列

Bulmaのグリッドの列は、サイズ(横幅)を指定することもできます。
Bulmaのグリッドで列のサイズを指定する方法については、以下の記事を参考にしてください。

Bulmaのグリッドシステム(columns)列のサイズ指定
前回に引き続き、CSSフレームワークのBulmaを使ったグリッドシステムの使い方について記載します。 前回は、Bulmaのcolumn...