Gridレイアウトについて:Bootstrap 4｜レンタルサーバーナレッジ

Gridレイアウトとは、画面幅に合わせて最大12個にレイアウトを分割すことができます。
Bootstrap4から、Flexboxを使用され、5つのブレイクポイントが設計されています。

使い方

下記は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>

結果：

One of three columns

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

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

	576px未満	576px以上	768px以上	992px以上	1200px以上
コンテナの最大幅	なし	540px	720px	960px	1140px
クラス名	.col（xs）	.col-sm	.col-md	.col-lg	.col-xl

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

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

結果：

One of three columns

縦方向の位置（アイテム単位）

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>

結果：

One of three columns

水平方向の位置

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

One of two columns

columns

各カラムの余白

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>

結果：

.col-sm-3

表示プロパティ

表示用のプロパティを使うことで、各ブレイクポイントに合わせて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

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

<< レイアウトタイポグラフィー >>