最近のレスポンシブWebデザインを支えるのはグリッドデザインです。画面幅を幾つかに分割し（大抵12個が多いですが）、画面幅によってその内幾つのブロックを横に並べて表示するかを決定します。 多彩なUIフレームワークと共に提供されることが多いですが、今回はごく基本的なグリッド機能だけ提供するo-gridを紹介します。

o-gridの使い方

o-gridの組み込みは簡単です。CSSをヘッダータグ内で読み込むだけです。

<head>
	<link rel="stylesheet"
	      href="https://origami-build.ft.com/v2/bundles/css?modules=o-grid@^4.0.0" />
</head>

使い方として次のようになります。o-grid-containerといったクラスを定義します。

<div class="o-grid-container">
	<div class="o-grid-row">
		<!-- two divs, spanning a total of 12 columns -->
		<div data-o-grid-colspan="8">A div, 8 columns wide</div>
		<div data-o-grid-colspan="4">Another div, 4 columns wide</div>
	</div>
</div>

そうすることで次のように細かくグリッドが使えるようになります。

数字だけでなく文字で定義もできます。

o-gridを使えばグリッドデザインだけを手軽に導入できます。グリッドは可変幅に伴う最適な幅の計算が必要なので、一から作るのは意外と面倒です。ぜひo-gridを使ってデザインを構築してみてください。

o-gridはCSS3製のオープンソース・ソフトウェア（MIT License）です。

o-grid - Origami registry Financial-Times/o-grid: Responsive grid system