WebMatrix 2 でレスポンシブな CSS グリッドを作ってみる

f:id:daruyanagi:20120914073223p:plain

WebMatrix 2 は iPhone での見栄えも簡単にチェックできてなかなかいい。

CSS グリッド

最近、Twitter Bootstrap は大げさすぎるなぁ、もうちょっと軽量のグリッドシステムないかな、と思っていたのだけど、こういうのを見つけた。

いい感じかもしれない。

.container { width: 940px; margin: 0 auto;}
.grid1, .grid2, .grid3, .grid4, .grid5, .grid6, .grid7, .grid8, .grid9, .grid10, .grid11 {
  float: left;
  display: inline;
  margin-left: 20px;
}
.grid1 {width: 60px;}
.grid2 {width: 140px;}
.grid3 {width: 220px;}
.grid4 {width: 300px;}
.grid5 {width: 380px;}
.grid6 {width: 460px;}
.grid7 {width: 540px;}
.grid8 {width: 620px;}
.grid9 {width: 700px;}
.grid10 {width: 780px;}
.grid11 {width: 860px;}
.first {margin-left: 0;clear: left;}

/* clearfix */
.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
 /* IE6 */
* html .clearfix { zoom: 1;}
 /* IE7 */
*:first-child+html .clearfix {zoom: 1;}

で、grid* で幅を指定して、先頭になるグリッドに .first をつければいいみたい。ネストもできるよ。あったまいい！

More responsible！

でも、それだと一つ問題がある。レスポンシブじゃない。今回はブラウザー幅に応じて並び替えもやってほしいと思っていたのだけれど、このやり方だと先頭になるグリッドを決めなきゃいけない。でも、ブラウザー幅に応じて並び替えが前提だと、事前にどのグリッドが先頭であるかを指定することができない。

f:id:daruyanagi:20120914072338p:plain

640px ぐらいの幅を……

f:id:daruyanagi:20120914072341p:plain

ちょっと大きく……

f:id:daruyanagi:20120914072345p:plain

もっと大きく！

というわけで、少しだけ手直しをした（ダミーイメージには DummyImage 1.0.0 - だるろぐを使っています（ステマ））。

.container {
    overflow: auto;
    margin: 0 auto 2em auto;
    
    * {
        max-width: 100%;  // <-- 画像とかがはみ出ないように
    }
}

.grid1, .grid2, .grid3, .grid4, .grid5, .grid6,
.grid7, .grid8, .grid9, .grid10, .grid11, .grid12 {
    float: left;
    display: inline;
    margin-left: 20px;
    position: relative; // <-- 追加
    left: -20px;        // <-- 追加
}
.grid1  { width: 60px;  }
.grid2  { width: 140px; }
.grid3  { width: 220px; }
.grid4  { width: 300px; }
.grid5  { width: 380px; }
.grid6  { width: 460px; }
.grid7  { width: 540px; }
.grid8  { width: 620px; }
.grid9  { width: 700px; }
.grid10 { width: 780px; }
.grid11 { width: 860px; }
.grid12 { width: 940px; } // <-- 追加

/*.first {margin-left: 0;clear: left;}*/

.claerfix {
    &:after {
        visibility: hidden;
        display: block;
        font-size: 0;
        content: " ";
        clear: both;
        height: 0;
    }
    /* IE6 */
    * html & {
        zoom: 1;
    }
    /* IE7 */
    *:first-child + html & {
        zoom: 1;
    }
}

全体に左マージンをつけて、その分左にずらす。これで first は要らなくなった（というか使えなくなった）。 clearfix も LESS で書いておけば意味的にまとめられていい感じ。

@media (min-width: 981px) {
    .container {
        width: 960px;
    }
}

@media (max-width: 980px) {
    .container {
        width: 640px;
    }
}

@media (max-width: 640px) {
    .container {
        width: 300px;
    }
}