【Bootstrap4】グリッドレイアウト（列の自動レイアウト）

Bootstrap4のグリッドレイアウトの説明は長いので列の自動レイアウトは別ページに。
Bootsatrap4からはグリッドシステムにcss3のflexboxが利用されるようになりました。
.col-sm-6のような明示的に番号を付けられたクラスがなければ自動的に幅が設定されます。
基本は【Bootstrap4】グリッドレイアウト基本ページに記載しています。

等幅（Equal-width）

必要なブレークポイントごとに数字の指定のないクラスを追加すると、すべての列が同じ幅で表示されます。

等幅（Equal-width）使用例

2分割列の設定は、.colで指定。最小サイズの指定になるので568px未満でも2列表示になります。
3分割列の設定は、.col-smで指定。568pxでは3列表示になります。
codepenを別ウインドウで開きブラウザの幅を変更しながら確認するとわかりやすいです。

html

<h3>2分割列の設定</h3>
<div class="container">
  <div class="row">
    <div class="col">
      2つの列の1列目<br>.col
    </div>
    <div class="col">
      2つの列の2列目<br>.col
    </div>
  </div>
</div>

<h3>3分割列の設定（sm以上）</h3>
<div class="container">
  <div class="row">
    <div class="col-sm">
      3つの列の1列目<br>.col-sm
    </div>
    <div class="col-sm">
      3つの列の2列目<br>.col-sm
    </div>
    <div class="col-sm">
      3つの列の3列目<br>.col-sm
    </div>
  </div>
</div>

等幅（Equal-width）使用時の注意点

等幅の列は複数の行にも分割可能ですが、Safariの少し古いバージョンではバグがあるようです。バージョン10.1で修正されたようで、最新のものは関係ありませんが少し注意が必要かもです。
下記のページのバグだそうです。
Flexbug #11
日本語だと下記のバグのことかと思います。
flexboxのバグに立ち向かう（flexboxバグまとめ）

Bootstrap4 等幅（Equal-width）複数行分割 使用例

改行させたい部分に<div class="w-100"></div>と空の要素を入れることで複数行の分割を行うようです。空要素なので嫌いな人もいそうですが。。

html

<div class="container">
  <div class="row">
    <div class="col">1列目</div>
    <div class="col">2列目</div>
    <div class="w-100"></div>
    <div class="col">3列目</div>
    <div class="col">4列目</div>
  </div>
</div>

1列の幅の設定（Setting one column width）

1行の中で分割した列で数字を指定したクラスと指定しないクラスが混在した場合は、12-指定した数字の合計=残りの数字を指定しなかった列で等分されます。

例えば1行を3分割（3カラム）にし、真ん中だけ6設定をした場合は12-6=6で残りの6を2つの指定しなかった列で等分するので3:6:3の3分割になります。

html

<div class="container">
  <div class="row">
    <div class="col">1列目<br>.col</div>
    <div class="col-6">2列目<br>.col-6</div>
    <div class="col">3列目<br>.col</div>
  </div>
</div>

可変幅のコンテンツ（Variable width content）

col(-{breakpoint})-autoクラスを使用すると、コンテンツの中身の幅にフィットしたサイズで表示できます。
試しに可変幅に設定したコンテンツの中のテキストをたくさん入れてみた例を作成しましたが、改行されず表示されるようなので使用時には注意が必要かもしれません。

大きな画面でブラウザの幅を変更しながら確認して見て下さい。

下記のcodepenの例ページを別ページで開く

html

<div class="container">
  <h3>中央を可変幅。左右を数字を入れたクラスを指定した例</h3>
  <div class="row justify-content-sm-center">
    <div class="col col-lg-2">
      3つの列の1列目<br>.col-lg-2
    </div>
    <div class="col-md-auto">
      3つの列の2列目<br>.col-md-auto
    </div>
    <div class="col col-lg-2">
      3つの列の3列目<br>.col-lg-2
    </div>
  </div>
  <h3>中央を可変幅。左右を数字を入れないクラスを指定、右のみmdで数字を指定したクラスも設定した例</h3>
  <div class="row">
    <div class="col">
      3つの列の1列目<br>.col
    </div>
    <div class="col-md-auto">
      3つの列の2列目<br>.col-md-auto
    </div>
    <div class="col col-lg-2">
      3つの列の3列目<br>.col
    </div>
  </div>
  <h3>中央を可変幅にし、テキストを大量に入れた例</h3>
  <div class="row">
    <div class="col">
      3つの列の1列目<br>.col
    </div>
    <div class="col-sm-auto">
      可変幅コンテンツ可変幅コンテンツ可変幅コンテンツ可変幅コンテンツ可変幅コンテンツ可変幅コンテンツ可変幅コンテンツ<br>.col-md-auto
    </div>
    <div class="col col-lg-2">
      3つの列の3列目<br>.col
    </div>
  </div>
</div>

複数行の等幅（Equal-width multi-row）

等幅（Equal-width）使用時の注意点で書いたものと同じになります。
表示ユーティリティクラスの.w-100を改行させたい部分に入れることで複数行の分割を行うようです。
.w-100は幅100%を設定するクラスで、それを間に挟むことで改行をさせています。

html

<div class="container">
  <div class="row">
    <div class="col">1列目</div>
    <div class="col">2列目</div>
    <div class="w-100"></div>
    <div class="col">3列目</div>
    <div class="col">4列目</div>
  </div>
</div>

参照ページ

記事にする際に参考にさせていただいたページ。