JSFiddle - React, Tailwind, and code Playground

Responsive Grid Layout http://codepen.io/bradfrost/details/kpFzD

by Jennifer Perrin

HTML

<ul class="grid">
    <li>
        <div>
            <a href="#">1</a>
        </div>
    </li>
    <li>
        <div>
            <a href="#">2</a>
        </div>
    </li>
    <li>
        <div>
            <a href="#">3</a>
        </div>
    </li>
    <li>
        <div>
            <a href="#">4</a>
        </div>
    </li>
    <li class="wide">
        <div>
            <a href="#">5</a>
        </div>
    </li>
    <li class="wide">
        <div>
            <a href="#">6</a>
        </div>
    </li>
    <li>
        <div>
            <a href="#">7</a>
        </div>
    </li>
    <li>
        <div>
            <a href="#">8</a>
        </div>
    </li>
    <li>
        <div>
            <a href="#">9</a>
        </div>
    </li>
    <li>
        <div>
            <a href="#">10</a>
        </div>
    </li>
</ul>

CSS

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } /*http://paulirish.com/2012/box-sizing-border-box-ftw/*/

body {
  margin: 0;
  padding: 0;
  background: #F6F5DE;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
li {
  margin: 0;
  padding: 0;
}
a {
  color: #fff;
  text-decoration: none;
}

.grid {
  overflow: hidden;
  padding: 0.5em 0 0 0.5em;
  max-width: 76em;
  margin: 0 auto;
}
.grid li {
  padding: 0 0.5em 0.5em 0;
}
.grid li > div {
  background: #BE6700;
  padding: 7em 2em;
}
.grid li.wide {
  width: 100%;
}
.grid li a {
  display: block;
  text-align: center;
}

@media all and (min-width: 27em) {
  .grid li {
    width: 50%;
    float: left;
  }
}

@media all and (min-width: 40em) {
  .grid li {
    width: 33.3333333%;
  }
  .grid li.wide {
    width: 66.666666%;
  }
}
@media all and (min-width: 60em) {
  .grid li {
    width: 25%;
  }
  .grid li.wide {
    width: 50%;
  }
}