今回はBootstrapのレイアウト作成技法であるGrid System（グリッドシステム）についてを初心者の方にも分かりやすく解説していきます。
Grid System（グリッドシステム）とは、Bootstrapで作成できる12カラムのシステムと、5段階のレスポンシブ、Sassとmixinでいくつかの定義されたクラスですべての図形とサイズのレイアウトが作成可能な仕組みの事を言います。
初めは理解するのに時間が掛かりますが、理解するとコーディングが一気に楽になります。当記事で”なるべく分かりやすく”を意識して解説してますので諦めかけている方は、是非最後まで読んで下さい。
▼ Bootstrapについて理解していない方は以下の記事を初めに読んで下さい。
グリッドシステムの概要
Bootstrapの公式ドキュメントでも説明がありますが、Grid System（グリッドシステム）を使うと以下の様にカラムレイアウトを簡単に作成でき、尚レスポンシブにも簡単に対応することが出来ます。
HTML
<div class="container mt-5">
<div class="row">
<div class="col-sm-4">
<div class="red">赤のブロック</div>
</div>
<div class="col-sm-4">
<div class="blue">青のブロック</div>
</div>
<div class="col-sm-4">
<div class="yellow">黄色のブロック</div>
</div>
</div>
</div>Grid System（グリッドシステム）を使うには以下のclassを必ず使用しますので覚えておきましょう。
| class | 意味 |
|---|---|
.container | コンテナ |
.row | 行（横） |
.col-○○ | 列（縦） |
グリッドシステムの基礎
Grid System（グリッドシステム）はrow（行）に対して12カラム（列）存在します。HTMLの要素毎に、この12カラムのうち何カラムを使用するかを指定する事が出来ます。
containerクラスで一つのグループとしてのコンテナを作成し、rowクラスで横列を作成します。その中にcol-○○のクラスを指定することで、そのサイズ、その数字分のカラムを使用します。
以下のHTMLの場合、各ブロックの入ったdiv要素をcol-4のクラスを指定していますので、4カラム使用している事になります。
<div class="container mt-5">
<div class="row">
<div class="col-4">
<div class="red">赤のブロック</div>
</div>
<div class="col-4">
<div class="blue">青のブロック</div>
</div>
<div class="col-4">
<div class="yellow">黄色のブロック</div>
</div>
</div>
</div>
ただし、これだけだと以下のようにスマホ時でも1行に対して4カラムずつ使用する事になります。これだとレスポンシブにはなっていません。そこで次にレスポンシブ対応するために重要なクラスの説明をします。
グリッドシステムのレスポンシブ対応
グリッドシステムのカラムに関するクラスには、端末サイズ毎に振り分けを付ける事が可能です。いわゆるCSSのブレイクポイントになっており、その指定したサイズに先程のカラムを適応させ、それ意外のCSSを外せる様になっています。これを使ってレスポンシブ対応します。
各端末サイズ毎のクラスは以下の様になっています。
| class | ブレイクポイント | 意味 |
|---|---|---|
| .col- | 無し | 全てに適応 |
| .col-sm- | ≥576px | 576px以上に適応（スマホ、iPad小） |
| .col-md- | ≥768px | 768px以上に適応（iPad、PC） |
| .col-lg- | ≥992px | 992px以上に適応（iPad大、PC） |
| .col-xl- | ≥1200px | 1200px以上に適応（PC） |
これを使って先程のHTMLをレスポンシブ化にしたい場合は、以下のようにcol-sm-4を付けてあげれば良いのです。
<div class="container mt-5">
<div class="row">
<div class="col-sm-4">
<div class="red">赤のブロック</div>
</div>
<div class="col-sm-4">
<div class="blue">青のブロック</div>
</div>
<div class="col-sm-4">
<div class="yellow">黄色のブロック</div>
</div>
</div>
</div>
この仕組みを利用して以下の様にクラスを振り分ければ、スマホ時は1カラム、スマホ横時は2カラム、iPadとPCは3カラムと端末毎に最適なレイアウトに可変する事が出来ます。
<div class="container mt-5">
<div class="row">
<div class="col-sm-6 col-md-4 mb1">
<div class="red">赤のブロック</div>
</div>
<div class="col-sm-6 col-md-4 mb-1">
<div class="blue">青のブロック</div>
</div>
<div class="col-sm-6 col-md-4 mb-1">
<div class="yellow">黄色のブロック</div>
</div>
<div class="col-sm-6 col-md-4 mb-1">
<div class="red">赤のブロック</div>
</div>
<div class="col-sm-6 col-md-4 mb-1">
<div class="blue">青のブロック</div>
</div>
<div class="col-sm-6 col-md-4 mb-1">
<div class="yellow">黄色のブロック</div>
</div>
<div class="col-sm-6 col-md-4 mb-1">
<div class="red">赤のブロック</div>
</div>
<div class="col-sm-6 col-md-4 mb-1">
<div class="blue">青のブロック</div>
</div>
<div class="col-sm-6 col-md-4 mb-1">
<div class="yellow">黄色のブロック</div>
</div>
</div>
</div>col-sm-6はスマホ横（≥576px）では6カラム使用＝2カラム、col-md-4はiPadとPC（≥768px）では4カラム使用＝3カラム。それ以外は1カラムになります。と言ったように、複数のクラスを端末毎に考えて付けている指示です。
以上が「Bootstrapのグリッドシステムの使い方を解説【初心者向け】」でした。
これを理解するとBootstrapを一気に好きになると思います。多分。。
いずれにしても、この仕組みを使ったサイトが非常に多いのでWEB制作の世界では必須な知識です。
