Grid レイアウトの使い方：Bootstrap 4

Grid（グリッド）レイアウトとは、画面幅に合わせて最大12個にレイアウトを分割する機能のことです。
Bootstrap 4 から、Flexbox が使用され、5つのブレイクポイントが設計されています。

本記事では、Grid レイアウトの使い方について解説します。

Grid レイアウトの使い方

下記は Grid レイアウトの簡単な使い方です。

「 .container 」の中に、「 .row 」を入れ、その中に分割したいカラムを記述します。
下記の「 .col-sm 」は、sm というサイズ以上の場合に3カラムを維持します。

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

結果：

ブレイクポイント（サイズ）

各ブレイクポイントと、クラス名は下記の通りです。

クラスの定義は下記の通り。

.col ： 576px以下の場合
.col-* ： 576px以上の場合（例）.col-md
.col-*-* ： カラム数を指定する場合（例）.col-md-6

縦方向の位置（列単位）

div.rowに下記クラスを追加するとアイテム単位で、縦方向の位置を上下、中央寄せすることができます。
.align-items-start：上寄せ
.align-items-center：中央寄せ
.align-items-end：下寄せ

<div class="container">
<div class="row align-items-start">
  <div class="col">
    One of three columns
  </div>
  <div class="col">
    One of three columns
  </div>
</div>
<div class="row align-items-center">
  <div class="col">
    One of three columns
  </div>
  <div class="col">
    One of three columns
  </div>
</div>
<div class="row align-items-end">
  <div class="col">
    One of three columns
  </div>
  <div class="col">
    One of three columns
  </div>
</div>
</div>

結果：

縦方向の位置を指定する方法（アイテム単位）

div.row に下記クラスを追加すると縦方向の位置を上下、中央寄せすることができます。
.align-self-start：上寄せ
.align-self-center：中央寄せ
.align-self-end：下寄せ

<div class="container">
<div class="row">
  <div class="col align-self-start">
    One of three columns
  </div>
  <div class="col align-self-center">
    One of three columns
  </div>
  <div class="col align-self-end">
    One of three columns
  </div>
</div>
</div>

結果：

水平方向の位置を指定する方法

div.row に下記クラスを追加すると水平方向の位置を指定することができます。
.justify-content-start ： 左寄せ
.justify-content-center ： 中央寄せ
.justify-content-end ： 右寄せ
.justify-content-around ： 左右に余白を開け等間隔に配置
.justify-content-between ： 等間隔に配置

各カラムの余白を0にする方法

Bootstrapの各カラムは左右に15pxの余白がデフォルトで挿入されます。
この余白を0にしたい場合はdiv.rowに「.no-gutters」を指定してください。

<div class="container">
  <div class="row no-gutters">
    <div class="col-sm">余白ゼロ</div>
    <div class="col-sm">余白ゼロ</div>
  </div>
</div>

結果：

列を改行する方法

列を改行するには少しハックが必要です。
改行したい箇所に下記コードを挿入してください。

<div class="w-100"></div>

<div class="example-box">
  <div class="container">
    <div class="row">
      <div class="col-sm-3">.col-sm-3</div>
      <div class="col-sm-3">.col-sm-3</div>

      <!-- 改行コード（横幅100%） -->
      <div class="w-100"></div>

      <div class="col-sm-3">.col-sm-3</div>
      <div class="col-sm-3">.col-sm-3</div>
    </div>
  </div>
</div>

結果：

表示プロパティの使い方

表示用のプロパティを使うことで、各ブレイクポイントに合わせて display の値を変更することができます。
利用例としては、一番小さい画面サイズ（ xs ）の時にブロックを消すなど。

クラスの指定は下記の通り
◼ 書式
.d-{value}：xs用
.d-{breakpoint}-{value}：sm, md, lg, xl用

（Breakpoint）
sm、md、lg、xl

（Value）
none
inline
inline-block
block
table
table-cell
table-row
flex
inline-flex

（例）
全てのブレイクポイントで非表示：.d-none
xsのみで非表示：.d-none .d-sm-block
smのみで非表示：.d-sm-none .d-md-block
xsのみで表示：.d-block .d-sm-none

最後に

以上でレイアウトが使えるようになりました。
あとはコンポーネント（パーツ）を組み合わせていくと Web サイトが構築できていきます。