CodePen

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>
            
          
!
via HTML Inspector

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%;
  }
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................