[ CSS ] グリッドレイアウトのサンプル

汎用的に使える CSS グリッドレイアウトのサンプルがあれば良いなぁと思い、コンテンツエリアを等分割して、その中の領域をいくつ使うかでクラスを使い分けるサンプルを書いてみました。

– [ CSS ] グリッドレイアウトのサンプルページ

CSS 部分のサンプルコード

.col-3 {
    width: 940px;
    margin-bottom: 20px;
}
.col-3 .box-1 {
    float: left;
    width: 300px;
    padding-right: 20px;
}
.col-3 .box-2 {
    float: left;
    width: 620px;
    padding-right: 20px;
}
.end {
    float: right !important;
    padding-right: 0px !important;
}

HTML 部分のサンプルコード

<div class="col-3">
    <div class="box-2">ボックスふたつ分なのでクラスは box-2</div>
    <div class="box-1 end">ボックスひとつ分なのでクラスは box-1</div>
</div>

問題点・やりたい事

– 等間隔にしか分割できない？ – 940 ピクセル以外の綺麗な数字で割り切れるコンテンツ幅を探してみる。 ( 960 Grid System とか ) – 最後のボックスに特別な指定を入れなくても表示される様にしたい。 Internet Explorer の古いバージョンで問題が出るのかな？ – クラス名を考え直す。 クラス名を c1, cb1 とかにする？