カラムの数と幅などを指定するだけでCSSを生成してくれるグリッドシステム「The 1KB CSS Grid」

カラムの数と幅とガターの幅の3つだけを指定するだけでCSSを生成してくれるグリッドシステム「The 1KB CSS Grid」の紹介です。

css0906261.jpg

カラムの数を10、幅を80(といっても、80までしかないのですが、)、ガターの幅を10と設定したソースが下記です。

.grid_1 { width:80px; }
.grid_2 { width:170px; }
.grid_3 { width:260px; }
.grid_4 { width:350px; }
.grid_5 { width:440px; }
.grid_6 { width:530px; }
.grid_7 { width:620px; }
.grid_8 { width:710px; }
.grid_9 { width:800px; }
.grid_10 { width:890px; }

.column {
	margin: 0 5px;
	overflow: hidden;
	float: left;
	display: inline;
}
.row {
	width: 900px;
	margin: 0 auto;
	overflow: hidden;
}
.row .row {
	margin: 0 -5px;
	width: auto;
	display: inline-block;
}

手軽で簡単。これに尽きます。