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

カラムの数を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;
}
手軽で簡単。これに尽きます。















コメントする