Bootstrap Gridのおさらい

久しぶりにBSで組んだ際にちょっと記憶が曖昧だったGridまわりの仕様を読み返す。

.container

.containerはグリッドシステムを包む包括的なクラス。デバイスごとの余白のコントロールや中央配置を設定するために使用する。実質的に必須。

デフォルトのコンテナはExtra Smallまでが横幅100%。以降は画面サイズに合わせて横幅が変化する。

.container-??

smやmdなどの指定を行うと、指定したサイズ以上の場合に設定された横幅に変更される。言い換えると、指定した範囲以下を100%で表示することができる。

例えば.container-mdだと、画面幅767pxまでは横幅100%を採るが、768px以上になるとブレイクポイントに従って画面幅が指定された値になる。

基本的にはスマホ、タブレットまでは横幅100%にしたいパターンが多いのでlg指定が多い（気がする）。

横幅常に100%にしたい

.container-fluidがある。背景色を伴うようなパーツに使用できる。

.row

.rowはカラムを包括する。カラムの列に対して行に該当する。こちらもカラムを使用する場合は必須。

.col

.rowに対して列を意味する。12のグリッドを任意の数に分割して表示させることができる。

最初は.containerとごちゃ混ぜになりやすいので、レクチャーする際に注意する。

.col-??-?

コンテナで指定したように、カラムでも画面サイズによって分割を変更することができる。

ポイントは指定した画面サイズ以上がその指定になるというところ。

<div class="container">
  <div class="row">
    <div class="col-sm-8">col-sm-8</div>
    <div class="col-sm-4">col-sm-4</div>
  </div>
</div>

このケースだと、sm（≥576px）以上の画面サイズの場合に8:4の割合で分割される。それよりも小さい場合は横幅12扱いとなって縦方向にスタックされる。

注意するのは、.col-4のように画面サイズを指定していない場合の挙動。

<div class="container">
  <div class="row">
    <div class="col-8">col-8</div>
    <div class="col-4">col-4</div>
  </div>
</div>

この場合は全サイズで8:4で分割される。画面が超狭かろうが指定された分割が行われる。

3つ以上のデバイス対応

タブレットにも最適化したい、といったニーズがある場合は指定方法がいささか複雑になる。

<div class="container">
  <div class="row">
    <div class="col-sm-6 col-lg-8">.col-sm-6 .col-lg-8</div>
    <div class="col-6 col-lg-4">.col-6 .col-lg-4</div>
  </div>
</div>

この場合、lgサイズ（≥992px）以上の場合は8:4で分割される。さらにsmサイズ（≥576px）～lgサイズまでは6:6で表示され、smより小さいサイズの場合はスタックされて縦に並ぶ。

ただし2つ目のボックスには.col-6が指定されているので、スタックされた後に横幅6/12となる。なお1つ目のボックスは横幅100%。