bootstrap4のグリッドシステムを理解する

いまだ正式版が公開されないままのbootstrap4。
そのグリッドシステムについて、bootstrap3と何が違うかや新機能について理解を深めようと思います。

本家ドキュメント(英語)

大きな変更 -> flexboxの採用

グリッドシステムはflexboxを採用したので、より柔軟なサイズを指定しないcolが導入されました。
今まではcol-sm-4やcol-md-3などで適用するブレイクポイントとサイズの指定を行なっております。
bootstrap4ではこの指定を残しつつ、新たにサイズを指定しないcolの指定が可能になります。
このcolはrowでラップされている内容のcolの個数によって自動的に幅を決定します。
また、col-6のように従来と同様に幅を１２分割のうちの割合として指定できます。
従来では不可能だった奇数割合をさらに２分割といったことも可能になります。

<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      1 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

上記例の２段目では5割の余白である７割分を２分割しております。
この仕様により、より柔軟なレイアウトが可能になります。

各ブレイクポイントにおいてもcol-md-autoのように-auto指定により明示的にcolと同様の設定が可能です。

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-12 col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

各行の幅を統一したい場合はw-100を使用できるとありますが、空div前提なのはちょっと問題がありそうです。

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

大きな変更その２ -> セルの位置調整

縦位置の調整

各行に対しての縦位置はalign-items-によって設定します。
上寄せ　<div class="row align-items-start">
中央寄せ<div class="row align-items-center">
下寄せ　<div class="row align-items-end">

それぞれのセルの縦位置指定はalign-self-によって指定します。

上寄せ <div class="col align-self-start">
中央寄せ<div class="col align-self-center">
下寄せ　<div class="col align-self-end">

横位置の指定

セルの分割割合が１２に足りない時のセルの配置指定もあります。

左寄せ　<div class="row justify-content-start">
中央寄せ<div class="row justify-content-center">
右寄せ　<div class="row justify-content-end">
余白含み均等割　<div class="row justify-content-around">
余白含まず均等割<div class="row justify-content-between">

ネガティブマージンの除去

bootstrap4のグリッドシステムは、rowでネガティブマージンを設定し、各セルでパディングを指定することで余白を設定しております。no-guttersはそのマージンとパディングを削除します。余白を含まないパネルデザインを作成するときなどに使用するかと思います。

paddingの変更はsassで

各セルごとの隙間はsassで一括変更可能になりました。

$grid-columns:               12 !default;
$grid-gutter-width-base:     30px !default;
$grid-gutter-widths: (
  xs: $grid-gutter-width-base,
  sm: $grid-gutter-width-base,
  md: $grid-gutter-width-base,
  lg: $grid-gutter-width-base,
  xl: $grid-gutter-width-base
) !default;

$grid-columnsがカラム数　$grid-gutter-width-baseがセルごとの隙間です。

大きな変更点は以上だと思います。