![WorkToolSmith [ワークツールスミス]](https://worktoolsmith.com/wp/wp-content/uploads/2014/11/d30716bfc62ca82b12c303b90f356916.png)
Twitter Bootstrapは真っ白な状態からビジュアルに富んだページを作るのに最適です。
その中でもっとも素晴らしいのが「グリッドシステム」
グリッドシステムとは？
Bootstrapはページを横に12分割し、それぞれの大きさをspan1～12でカンタンに指定できます。
さらにResponsive対応！スマホなど幅の狭いデバイスなど、幅によってグリッドの形が変形。見やすい大きさに並べ替えられます。（実際の動作はBootstrapのページでご確認を）
http://twitter.github.com/bootstrap/scaffolding.html#gridSystem
いままで悩んでいたメインカラムとサイドバーの位置や大きさ、長年多くの人を悩ませた「カラム落ち」を一気に解消してくれます。
では単純にBootstrapを追加すればバラ色なのか？
すでにサイトがある場合、そのまんまBootstrapを追加するのは少し危険です。
標準のBootstrapのスタイルシートを入れると、独自の文字設定や競合するCSSも現れます。とくにh1～h6などは指定が競合して、かなり見た目が変わることがあります。
すばらしいグリッドシステムのみが使いたい！
スタイルを変更せずにグリッドシステムのみを使いたいときは、Bootstrapのカスタマイズがオススメ。
Grid Systemやレイアウト、Responsiveなど必要な部分のみを選択し、一番下のCustomize and Downloadを押せばOK。
既存のスタイルを変えずにResponsive対応のグリッドシステムを手に入れられます。（もちろんCSSの結合は必要ですが）
グリッドシステムのみもカンタンに入手できますね！Bootstrapは神。
俺は自分でやるんだ！
自分でなにもかも指定したい人には、グリッドシステムのベースのみを提供するスタイルがあります。
３つご紹介します。
Responsive Grid System
12カラム～24カラムまで対応しているグリッドシステムです。Responsive対応。
ファイル内容は非常に単純で、カラムを%指定しているだけです。Bootstrapのように@mediaで画面の大きさごとに表示・非表示を指定するには、自分で工夫しなければなりません。
Responsive Grid System
おんなじ名前ですが、12カラムまで対応するグリッドシステム。Responsive対応です。
ただ、Boostrapや上のGrid Systemと比較すると、Responsiveの変形がだいぶ小さな状態まで引っ張る感じです。（かなり細くなるまで変形しない）
そのあたりが調整できるのかは試してません。
Columnal
原稿執筆時点でVer.0.85ということで、まだテスト段階的なグリッドシステム。
でもページを見る限り問題は無さそうです。
まとめ
グリッドシステムはホントに便利です。
現在はスマホ～27インチディスプレイまで、あらゆる大きさのマシンでWebサイトが見られています。Responsive対応、見やすさなどに気を配らなければなりません。
上記のようなグリッドシステムを導入しておけば、大幅なレイアウト変更にも余裕を持って対応できるはずです。
