グリッドレイアウトの概要

まず、グリッドレイアウトを内包する親要素の横幅を60pxの倍数にします。60という数字は2・3・4・5・6で割り切れるので、複雑なレイアウトを採用するウェブサイトは60pxを基準に設計すると何かと便利です。

次に、親要素の横幅を12分割します。なぜに12分割なのかと言えば、きれいに2等分(6+6)・3等分(4+4+4)・4等分(3+3+3+3) ができるからです。

例えば、親要素の横幅が960pxの場合に12分割すると、1個分の横幅は80pxになります。一行の合計が12個分になるよう設定すれば、きれいにボックスが並びます。2等分なら 480(6) + 480(6)、3等分なら 320(4) + 320(4) + 320(4)、4等分なら 240(3) + 240(3) + 240(3) + 240(3) です。

• 1 = 80px
• 2 = 160px
• 3 = 240px
• 4 = 320px
• 5 = 400px
• 6 = 480px
• 7 = 560px
• 8 = 640px
• 9 = 720px
• 10 = 800px
• 11 = 880px
• 12 = 960px

内容量に合わせて比率を変えれば、160(2) + 320(4) + 480(6) のように等分ではないレイアウトも簡単です。

横幅の指定をパーセントにすると汎用的に利用できます。ただし、要素間に左右の余白をとりたい場合は、レイアウトボックス内の子要素にmarginプロパティ等を指定する必要があります(CSS3のbox-sizingプロパティが普通に使えればいいんですけどね)。

• 1 = 8.33%
• 2 = 16.66%
• 3 = 24.99%
• 4 = 33.33%
• 5 = 41.66%
• 6 = 49.99%
• 7 = 58.33%
• 8 = 66.66%
• 9 = 74.99%
• 10 = 83.33%
• 11 = 91.66%
• 12 = 100%

親要素の横幅が画面領域に追従するような場合、小数点以下の扱いが微妙な古いブラウザでは、カラム落ちする可能性があります。なので、画面領域に応じて横幅を決めておくといいでしょう。

横幅をbody要素に指定しているときの Media Queries の一例

/* 1200px以上 */
@media only screen and (min-width: 1200px) {
  body {
    width: 1200px;
  }
}
/* 960px以上 1199px以下 */
@media only screen and (min-width: 960px) and (max-width: 1199px) {
  body {
    width: 960px;
  }
}
/* 720px以上 959px以下 */
@media only screen and (min-width: 720px) and (max-width: 959px) {
  body {
    width: 720px;
  }
}
/* 719px以下 */
@media only screen and (max-width: 719px) {
  body {
    width: 480px;
  }
}

グリッドレイアウトのHTMLとCSS

汎用的に使えるよう、.boxes というグリッドレイアウトの範囲を示す要素用の class と、実際にレイアウトする要素用の .box01 から .box12 までの class を用意します。

以下のコードで冒頭のイメージのようなレイアウト結果になります。

HTML

<ul class="boxes">
  <li class="box01"><div>box01</div></li>
  <li class="box11"><div>box11</div></li>
  <li class="box02"><div>box02</div></li>
  <li class="box10"><div>box10</div></li>
  <li class="box03"><div>box03</div></li>
  <li class="box09"><div>box09</div></li>
  <li class="box04"><div>box04</div></li>
  <li class="box08"><div>box08</div></li>
  <li class="box05"><div>box05</div></li>
  <li class="box07"><div>box07</div></li>
  <li class="box06"><div>box06</div></li>
  <li class="box06"><div>box06</div></li>
  <li class="box04"><div>box04</div></li>
  <li class="box04"><div>box04</div></li>
  <li class="box04"><div>box04</div></li>
  <li class="box03"><div>box03</div></li>
  <li class="box03"><div>box03</div></li>
  <li class="box03"><div>box03</div></li>
  <li class="box03"><div>box03</div></li>
  <li class="box02"><div>box02</div></li>
  <li class="box02"><div>box02</div></li>
  <li class="box02"><div>box02</div></li>
  <li class="box02"><div>box02</div></li>
  <li class="box02"><div>box02</div></li>
  <li class="box02"><div>box02</div></li>
  <li class="box12"><div>box12</div></li>
</ul>

CSS

.boxes {
  overflow: hidden;
  list-style: none;
  letter-spacing: -0.5em;
  word-spacing: -0.5em;
  *letter-spacing: 0;
  *word-spacing: 0;
  *zoom: 1;
}
.boxes>* {
  letter-spacing: 0;
  word-spacing: 0;
}
.boxes>[class^=box] {
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  *display: inline;
  *zoom: 1;
}
.boxes>.box01 {
  width: 8.33%;
}
.boxes>.box02 {
  width: 16.66%;
}
.boxes>.box03 {
  width: 24.99%;
}
.boxes>.box04 {
  width: 33.33%;
}
.boxes>.box05 {
  width: 41.66%;
}
.boxes>.box06 {
  width: 49.99%;
}
.boxes>.box07 {
  width: 58.33%;
}
.boxes>.box08 {
  width: 66.66%;
}
.boxes>.box09 {
  width: 74.99%;
}
.boxes>.box10 {
  width: 83.33%;
}
.boxes>.box11 {
  width: 91.66%;
}
.boxes>.box12 {
  width: 100%;
}

このコードではボックスを横に並べるのにfloatプロパティを使用せず、ボックスをinline-blockにすることで実現しています。HTML内での改行が半角スペースとなって現れるので、この半角スペースを排除するためにletter-spacingプロパティとword-spacingプロパティにマイナス値を指定しています。

floatプロパティを使わなければ、一行ごとにclearプロパティを適用する必要がなくなるので、自然な形で要素をグループ化することができます。

実際のサンプルを見る