Zurb Foundation 6で、Grid（レスポンシブ対応段組機能）でカラムに枠線をつけたい

FoundationのGrid機能は大変強力ですが、実際のプロダクションフローやクライアントワークで求められるデザインを実現するには、CSSの理解と、カスタマイズが必要です。

カラムに線をつけるというのは必ずといって良いほど求められるスタイルですので、紹介しておきます。

前提として読んでおいていただきたい記事（拙著）

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

普通に考えると…

こうしますよね？？

hoge.html

<div class="row">
  <div class="columns medium-8">
    <h2>メインコンテンツ</h2>
    <p>メインだよ　　メインだよ　　メインだよ　　メインだよ　　メインだよ　　メインだよ　　メインだよ　　メインだよ　　メインだよ　　メインだよ　　メインだよ　　メインだよ　　メインだよ　　メインだよ　</p>
    <p>メインだよ　　メインだよ　　メインだよ　　メインだよ　　メインだよ　　メインだよ　　メインだよ　　メインだよ　　メインだよ　　メインだよ　　メインだよ　　メインだよ　　メインだよ　　メインだよ　　</p>
  </div>
  <div class="columns medium-4">
    <h2>サイドバーだよ</h2>
    <p>サイドだよ　　サイドだよ　　サイドだよ　　サイドだよ　　サイドだよ　　サイドだよ　　サイドだよ　　</p>
  </div>
</div>

app.css

.columns {
  border: 1px solid #ddd;
}

結果

うーん、なんか残念ですね。メインとサイドバーがぴっちりくっついちゃってます。

改善

hoge-advanced.html

<div class="row">
  <div class="columns medium-8">
    <div class="inner">
      <h2>メインコンテンツ</h2>
      <p>メインだよ　　メインだよ　　メインだよ　　メインだよ　　メインだよ　　メインだよ　　メインだよ　　メインだよ　　メインだよ　　メインだよ　　メインだよ　　メインだよ　　メインだよ　　メインだよ　</p>
      <p>メインだよ　　メインだよ　　メインだよ　　メインだよ　　メインだよ　　メインだよ　　メインだよ　　メインだよ　　メインだよ　　メインだよ　　メインだよ　　メインだよ　　メインだよ　　メインだよ　　</p>
    </div>
  </div>
  <div class="columns medium-4">
    <div class="inner">
      <h2>サイドバーだよ</h2>
      <p>サイドだよ　　サイドだよ　　サイドだよ　　サイドだよ　　サイドだよ　　サイドだよ　　サイドだよ　　</p>
    </div>
  </div>
</div>

app.css

.inner {
  border: 1px solid #ddd;
  padding: 0 15px;
}

.columnsの一つ下に.innerという要素を新しく作り、それに対して枠線をあてています。また、paddingも調整しました。

結果

メインとサイドバーの間に隙間が空きました。良い感じになりましたね。