Zurb Foundation 6で、Grid（レスポンシブ対応段組機能）を使って、アイテムリストを作る（Block Grid）

アイテムリストとは、私が作ったWeb造語（[参考](http://qiita.com/kohki-shikata/items/cc2b4626ae758308bae2)）なのですが、いわゆる「ブログ記事一覧」とか「ECサイトの商品一覧」とか、ひとかたまりのコンテンツが決まった体裁で並ぶデザインのことです。

この記事では、Gridの機能の中でも、Block Gridという機能を使って、簡単に作ってみましょう。

# 前提条件

## まずはこちらをお読みください
* [Zurb Foundation 導入前の予備知識](http://qiita.com/kohki-shikata/items/bd6cfda580a54159232e)
* [Zurb Foundation 6で、Grid（レスポンシブ対応段組機能）を理解し実用する（基本編）](http://qiita.com/kohki-shikata/items/db34b811f2e1ab25fcbb)
* [Zurb Foundation 6のGrid（レスポンシブ対応段組機能）について、小ネタとTips編](http://qiita.com/kohki-shikata/items/1edfb347d72dae0ae852)

XDでこんなカンプを作ってみました。

PCの時

![Web 1920 – 1.png](https://qiita-image-store.s3.amazonaws.com/0/116223/7a01cff1-4965-1d20-2ceb-d34e3d800417.png)

タブレットの時

![Web 1920 – 2.png](https://qiita-image-store.s3.amazonaws.com/0/116223/44eeae62-d465-b827-9fd5-dcdc44a56187.png)

スマホの時

![Web 1920 – 3.png](https://qiita-image-store.s3.amazonaws.com/0/116223/80d3aad3-aac3-defe-f227-ec1257b4055d.png)

要は、

|スマホ|タブレット|PC|
|:-:|:-:|:-:|
|2カラム|3カラム|6カラム|

であり、アイテムの幅は均等である、ということです。

# 実践

```html:hoge.html
<div class="row small-up-2 medium-up-3 large-up-6">
  <div class="columns">
    <div class="inner">
      <p class="eyecatch"><img src="http://placehold.jp/480x200.png"/></p>
      <h2>見出しです</h2>
      <div class="desc">
        <p>ディスクリプションです　　ディスクリプションです　　ディスクリプションです　　ディスクリプションです　　</p>
      </div>
      <p class="text-right more"><a href="#">続きを読む &gt;</a></p>
    </div>
  </div>
  <div class="columns">
    <div class="inner">
      <p class="eyecatch"><img src="http://placehold.jp/480x200.png"/></p>
      <h2>見出しです</h2>
      <div class="desc">
        <p>ディスクリプションです　　ディスクリプションです　　ディスクリプションです　　ディスクリプションです　　</p>
      </div>
      <p class="text-right more"><a href="#">続きを読む &gt;</a></p>
    </div>
  </div>
  <div class="columns">
    <div class="inner">
      <p class="eyecatch"><img src="http://placehold.jp/480x200.png"/></p>
      <h2>見出しです</h2>
      <div class="desc">
        <p>ディスクリプションです　　ディスクリプションです　　ディスクリプションです　　ディスクリプションです　　</p>
      </div>
      <p class="text-right more"><a href="#">続きを読む &gt;</a></p>
    </div>
  </div>
  <div class="columns">
    <div class="inner">
      <p class="eyecatch"><img src="http://placehold.jp/480x200.png"/></p>
      <h2>見出しです</h2>
      <div class="desc">
        <p>ディスクリプションです　　ディスクリプションです　　ディスクリプションです　　ディスクリプションです　　</p>
      </div>
      <p class="text-right more"><a href="#">続きを読む &gt;</a></p>
    </div>
  </div>
  <div class="columns">
    <div class="inner">
      <p class="eyecatch"><img src="http://placehold.jp/480x200.png"/></p>
      <h2>見出しです</h2>
      <div class="desc">
        <p>ディスクリプションです　　ディスクリプションです　　ディスクリプションです　　ディスクリプションです　　</p>
      </div>
      <p class="text-right more"><a href="#">続きを読む &gt;</a></p>
    </div>
  </div>
  <div class="columns">
    <div class="inner">
      <p class="eyecatch"><img src="http://placehold.jp/480x200.png"/></p>
      <h2>見出しです</h2>
      <div class="desc">
        <p>ディスクリプションです　　ディスクリプションです　　ディスクリプションです　　ディスクリプションです　　</p>
      </div>
      <p class="text-right more"><a href="#">続きを読む &gt;</a></p>
    </div>
  </div>
  <div class="columns">
    <div class="inner">
      <p class="eyecatch"><img src="http://placehold.jp/480x200.png"/></p>
      <h2>見出しです</h2>
      <div class="desc">
        <p>ディスクリプションです　　ディスクリプションです　　ディスクリプションです　　ディスクリプションです　　</p>
      </div>
      <p class="text-right more"><a href="#">続きを読む &gt;</a></p>
    </div>
  </div>
  <div class="columns">
    <div class="inner">
      <p class="eyecatch"><img src="http://placehold.jp/480x200.png"/></p>
      <h2>見出しです</h2>
      <div class="desc">
        <p>ディスクリプションです　　ディスクリプションです　　ディスクリプションです　　ディスクリプションです　　</p>
      </div>
      <p class="text-right more"><a href="#">続きを読む &gt;</a></p>
    </div>
  </div>
  <div class="columns">
    <div class="inner">
      <p class="eyecatch"><img src="http://placehold.jp/480x200.png"/></p>
      <h2>見出しです</h2>
      <div class="desc">
        <p>ディスクリプションです　　ディスクリプションです　　ディスクリプションです　　ディスクリプションです　　</p>
      </div>
      <p class="text-right more"><a href="#">続きを読む &gt;</a></p>
    </div>
  </div>
  <div class="columns">
    <div class="inner">
      <p class="eyecatch"><img src="http://placehold.jp/480x200.png"/></p>
      <h2>見出しです</h2>
      <div class="desc">
        <p>ディスクリプションです　　ディスクリプションです　　ディスクリプションです　　ディスクリプションです　　</p>
      </div>
      <p class="text-right more"><a href="#">続きを読む &gt;</a></p>
    </div>
  </div>
  <div class="columns">
    <div class="inner">
      <p class="eyecatch"><img src="http://placehold.jp/480x200.png"/></p>
      <h2>見出しです</h2>
      <div class="desc">
        <p>ディスクリプションです　　ディスクリプションです　　ディスクリプションです　　ディスクリプションです　　</p>
      </div>
      <p class="text-right more"><a href="#">続きを読む &gt;</a></p>
    </div>
  </div>
  <div class="columns">
    <div class="inner">
      <p class="eyecatch"><img src="http://placehold.jp/480x200.png"/></p>
      <h2>見出しです</h2>
      <div class="desc">
        <p>ディスクリプションです　　ディスクリプションです　　ディスクリプションです　　ディスクリプションです　　</p>
      </div>
      <p class="text-right more"><a href="#">続きを読む &gt;</a></p>
    </div>
  </div>
</div>
```

```css:app.css
.inner {
  border: 1px solid #ddd;
  padding: 15px;
}

.eyecatch {
  margin-bottom: 1em;
  & img {
    width: 100%;
  }
}

.columns {
  margin-bottom: 30px;
}

h2 {
  font-size: 17px;
}

.desc {
  font-size: 12px;
}

.more {
  margin-bottom: 0;
}
```

## 結果

PCの時

![スクリーンショット 2016-08-27 17.27.32.png](https://qiita-image-store.s3.amazonaws.com/0/116223/90c0584c-a948-0823-826f-13d75038de7c.png)

タブレットの時

![スクリーンショット 2016-08-27 17.27.36.png](https://qiita-image-store.s3.amazonaws.com/0/116223/590bba5e-faee-a0f7-ced3-a4a7ba2b12fd.png)

スマホの時

![スクリーンショット 2016-08-27 17.27.39.png](https://qiita-image-store.s3.amazonaws.com/0/116223/a5ed4aa7-be40-1592-679e-29a2fe51c983.png)

# 解説

通常のグリッドでは、`.row`の中のカラムに降るクラスにつける数値の総和が12になるよう、というように書きました。しかし、Block Gridでは**総和でなく、`.row`の中で均等に割りたい数値を、`.row.画面幅-up-n`と記載**します。逆に、`.columns`に対しては他にクラスをふる必要はありません。

# Block Gridのイイトコロ

Gridではカラムの総和を常に考えないといけませんでしたが、Block Gridは割りたい数を指定すればいいだけなので、大変直感的です。

また、5や7といった素数で割ることもできます。多くのGridシステムが12という母数を採用しているのは、偶数と3の倍数で割りやすいからと言われていますが、時によっては5や7で割りたい時もあると思います。Block Gridは、８までであれば自由な数で割ることができます。

これはBootstrapなど他のCSSフレームワークにはないので、個人的にFoundationを気に入っている機能のひとつです。