概念も知っておかなければなりません。コントロールすることができます。左右に等間隔のグリッドを作り、中央寄せをしてみたりと、自由度の高いコンテンツレイアウトが出来るようになります。以降は、レスポンシブとグリッドが統合され、その真価を発揮するようになりました。レスポンシブを活用していきましょう。使用したグリッドシステムに変わったことで、より柔軟なレイアウトを実現できるようになりました(縦横揃え、表示順設定など)。初心者からよく上がる嘆きの声として、「なんかちょっとズレる!!」といった声があります。具体的に多いのは、左右のスペースが無くなってしまったり、右側にはみ出て横スクロールバーが出てきてしまったり...。それもそのはず、レスポンシブは何処でも生きられる訳では無く、それ相応の準備をした上で使用しないといけません。定義するコンテナ要素です。レスポンシブデザインは、このコンテナ要素の中でのみ、正しく効果を発揮します。レスポンシブやグリッドなどの要素を置くと、要素の位置がズレたり、画面幅が正しいものにならなかったりと、様々な弊害を生む可能性があります。変な挙動をしている場合は、この辺りを疑ってみましょう。2種類が存在し、コンテナをどう扱うかが異なります。Webページに合わせて、最適なコンテナを選択してください。画面の横幅が崩れないので、制作者が意図した通りのレイアウトができる。container-fluid可変幅コンテナコンテナ要素の幅は、常にブラウザの横幅いっぱいに広がって表示される。ブラウザの画面全体を使ってコンテンツを表示させたい場合に効果的。クラスを定義したブロック要素を置きます。クラスが定義されたブロック要素から、レスポンシブ要素が外に飛び出ることは基本的にありません。ルールで定義されるクラスを持った要素を配置していきます。いずれかが指定できます。指定したグリッド数分の横幅で、要素が表示されます。クラスで指定する必要が無くなりました。版を使用している場合は読み替えてください。言葉では伝わりづらいので、具体例を見てみましょう。ブラウザ幅を広げると、4グリッド分の横幅を持ったブロック要素が、3つ横並びに表示されます。ブラウザ幅を狭めると、通常のブロック要素のように、コンテナ要素の幅全体まで幅を使うようになります。今度は3つの要素が縦並びになりました。いう動きが実現できているのがわかります。使用することで、常時グリッドシステムを使用できます。重ねがけによる可変レイアウトブレイクポイントは、複数の画面サイズであれば、重ねて指定することができます。以下の例を考えてみましょう。したいややこしいですねぇ。手書きでHTMLを書いていれば、とっさにJavaScriptの出番になるような要件だと思いますが、グリッドシステムのおかげで、クラスを定義するだけで済みます。指定これらのクラスを、それぞれの要素に同時に定義します。自動的に分割カラム数が変化するようになりました。ように、12個分のグリッドを使い切ると、空いたスペースに回り込まれます。これを応用すれば、以下のようなよくある画像ギャラリーのようなレイアウトも、レスポンシブなグリッドを維持したまま簡単に実現できます。(offset)中央に寄った要素を作るために、わざわざ空の要素を置く必要はありません。オフセットを使用することで、指定した個数分、グリッドをずらして配置することが可能です。個分のグリッド幅分だけ、要素の左側にスペースを作ることができます。中央寄せにしてみましょう。サイズ以上の幅の時だけ、左右に広々と余白が生まれました。することで、左右3個分の空白となり、中央に寄ったように見える。横幅を縮めた場合...要素の横幅は画面全体まで伸びる。(v3のみ)グリッドを使用して、以下のような「サイドバー+コンテンツ」という構成のページを作成したとしましょう。