Bootstrap 5 グリッドシステム

グリッドシステム

Bootstrapのグリッドシステムはflexboxで構築されており、ページ上で最大12の列を許可しています。

12のすべての列を単独で使用したい場合は、これらの列を組み合わせてより幅広い列を作成できます：

グリッドシステムは迅速に反応し、列はスクリーンサイズに応じて自動的に再配置されます。

合計が12に等しくないかそれ以下であることを確認してください（12のすべての列を使用する必要はありません）。

グリッドクラス

Bootstrap 5のグリッドシステムは6つのクラスを提供しています：

  • .col- (超小型デバイス - スクリーン幅が576px未満)
  • .col-sm- (小型デバイス - スクリーン幅が576px以上)
  • .col-md- (中型デバイス - スクリーン幅が768px以上)
  • .col-lg- (大型デバイス - スクリーン幅が992px以上)
  • .col-xl- (超大型デバイス - スクリーン幅が1200px以上)
  • .col-xxl- (特大型デバイス - スクリーン幅が1400px以上)

上記のクラスを組み合わせることで、よりダイナミックで柔軟なレイアウトを作成できます。

ヒント：各クラスは比例で拡大されていますので、smとmdに同じ幅を設定したい場合はsmを指定するだけで良いです。

Bootstrap 5のグリッドの基本構造

以下はBootstrap 5のグリッドの基本構造です：

<!-- 列の幅を制御し、異なるデバイス上での表示方法を制御 -->
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
<!-- 或者 Bootstrap が自動的にレイアウトを処理するようにする -->
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

自分で試してみる

第1の例：行を作成します（<div class = "row">）。必要な数の列を追加します（ .col-*-* のタグ）。最初の星 (*) は応答性を表し、sm、md、lg、xl、または xxl を示します。第二の星は数字を表し、各行の合計が 12 になる必要があります。

第2の例：各列にクラスを col 数字を追加するのではなく、bootstrap がレイアウトを処理することで等幅の列を作成します：2つの "col" 要素 = 各列の 50% 幅で、3つの列 = 各列の 33.33% 幅。4つの列 = 25% 幅などです。また、以下を使用することもできます： .col-sm|md|lg|xl|xxl 列に応答性を提供します。

グリッドオプション

以下の表は、Bootstrap 5 グリッドシステムが異なるスクリーンサイズでどのように動作するかをまとめています：

超小（<576px） 小（>=576px） 中（>=768px） 大（>=992px） 超特大（>=1200px） 特大（>=1400px）
クラス接頭辞 .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
グリッドの動作 常に水平 折り返しの上で水平に始まる 折り返しの上で水平に始まる 折り返しの上で水平に始まる 折り返しの上で水平に始まる 折り返しの上で水平に始まる
コンテナの幅 なし（auto） 540px 720px 960px 1140px 1320px
適用 スマートフォンの縦画面 スマートフォンの横画面 タブレット ノートパソコン ノートパソコンおよびデスクトップ ノートパソコンおよびデスクトップ
列の # 12 12 12 12 12 12
ギャターワイドス 1.5rem （列の両側に .75rem ） 1.5rem （列の両側に .75rem ） 1.5rem （列の両側に .75rem ） 1.5rem （列の両側に .75rem ） 1.5rem （列の両側に .75rem ） 1.5rem （列の両側に .75rem ）
ネスト可能 はい はい はい はい はい はい
オフセット はい はい はい はい はい はい
列のソート はい はい はい はい はい はい