Foundation 6 Block Grid

foundation-6-block-grid.markdown

Foundation 6 Block Grid

A Pen by Robert Gorman on CodePen.

License.

index.html

<header class="hero">
  <div>
    <h1>7 Days of Free Downloads</h1>
    <h2>Download from over 300,000+ Graphics, Vectors, Icons, Buttons, Images and MORE!</h2>
  </div>
</header>
<div class="row small-up-2 medium-up-3 large-up-5 align-center">
  <div class="column column-block">
    <img src="http://placehold.it/600" alt=""/>
  </div>
  <div class="column column-block">
    <img src="http://placehold.it/600" alt=""/>
  </div>
  <div class="column column-block">
    <img src="http://placehold.it/600" alt=""/>
  </div>
  <div class="column column-block">
    <img src="http://placehold.it/600" alt=""/>
  </div>
  <div class="column column-block">
    <img src="http://placehold.it/600" alt=""/>
  </div>  
</div>

style.css

/* banner */
.hero {
  position: relative; overflow: hidden;
  width:100%; padding: 33px 0 52px;
  display:block;
}
.hero {
   background: gray;
}
/* banner contents */
.hero h1, .hero h2 {
  text-align:center; color:white;
  text-shadow:0 3px 5px rgba(0,0,0,.35);
}
.hero h2 {
  font-size: 19px; line-height: 23px;
}
.column-block {
  margin-top:33px;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/foundation.min.css" rel="stylesheet" />