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

アイテムリストとは、私が作ったWeb造語（参考）なのですが、いわゆる「ブログ記事一覧」とか「ECサイトの商品一覧」とか、ひとかたまりのコンテンツが決まった体裁で並ぶデザインのことです。

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

前提条件

まずはこちらをお読みください

• Zurb Foundation 導入前の予備知識
• Zurb Foundation 6で、Grid（レスポンシブ対応段組機能）を理解し実用する（基本編）
• Zurb Foundation 6のGrid（レスポンシブ対応段組機能）について、小ネタとTips編

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

PCの時

タブレットの時

スマホの時

要は、

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

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

実践

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>

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の時

タブレットの時

スマホの時

解説

通常のグリッドでは、.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を気に入っている機能のひとつです。