[CSS]可変でも固定でも対応できる、シンプルなグリッドシステム -Grid

FruidレイアウトでもFixedレイアウトでも、入れ子でも対応できる、シンプルなグリッドシステムを実装するスタイルシートを紹介します。

Grid -GitHub
デモページ

[ad#ad-2]

Gridを使用したグリッドは上記の3分割をはじめ、非常にシンプルです。

デモページ：「1:2」のカラム

デモページ：「2:3」のカラム

デモページ：入れ子のグリッド

Gridの使い方

Gridは、使い方も簡単です。

1. コンテナとなる要素のclassに「grids」を加えます。
2. 子要素に望むサイズのclassを指定します。

Gridのスタイルシート

2011年7月1日リリース版のスタイルシートです。

グリッドは、2分割、3分割、4分割、5分割が用意されています。

/*
* Grid
* A simple, flexible, fluid grid system that can flow nicely inside a fluid or a fixed container or play good with another Grid system.
* Brajeshwar, http://brajeshwar.com
*
* Demo & Details: http://brajeshwar.github.com/grid/
*/
 
/* grids container - wrap your grids within */
.grids { overflow: hidden; }

/* grids */

.g1of2, .g1of3, .g1of4, .g1of5,
.g2of3, .g2of5,
.g3of4, .g3of5,
.g4of5 { float: left; }

.g1of2 { width: 50%; }
.g1of3 { width: 33.333333333%; }
.g1of4 { width: 25%; }
.g1of5 { width: 20%; }

.g2of3 { width: 66.666666666%; }
.g2of5 { width: 40%; }

.g3of4 { width: 75%; }
.g3of5 { width: 60%; }

.g4of5 { width: 80%; }

[ad#ad-2]