グリッドシステムについて

今回は、Bootstrapを使っていく上で重要な機能であるグリッドシステムについて紹介していきます。
この記事では、グリッドシステムの仕組みについて軽く紹介していきます。

グリッドシステムについて

今回は、Bootstrapを使っていく上で重要な機能であるグリッドシステムについて紹介していきます。

この記事では、グリッドシステムの仕組みについて軽く紹介していきます。

グリッドシステムとは

Bootstrapの中に グリッドシステム と言われる機能があります。
これは 画面を縦12列に分割 して管理する技術です。
画面を12分割したうちの１つを グリッド と言います。

画面を12列に分けてデザインを行うことでPCやスマホで表示するときにデザインを組み替えやすくなります。
例えばPCでは３列で表示させるものを、スマホでは１列で表示させることができるようになります。

このように一つのデザインですべてのデバイスに対応できるデザインのことを レスポンシブデザイン と言います。

グリッドシステムを使うことでレスポンシブデザインを実現することができます。

グリッドシステムのクラス

グリッドシステムは以下３つのクラスがあります。

• container
• row
• col

基本的にはcontainerの中にrowがあり、rowの中にcolがあるという設計になります。

画面幅

Bootstrapにおけるグリッドシステムは以下のように５種類の画面サイズが定義されています。

画面サイズが切り替わる（543pxから544pxに変わり、xsからsmに変わる）と、コードの処理が変更され、自動で形が変更されます。
このような仕組みにより、レスポンシブデザインが実現しています。

次回以降の記事で、実際に動かしていく形での解説をしていきます。