JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<div class="row">
<div class="span6">
<a href="#" class="thumbnail">
<div class="frontpage_square">
<img src="" class="img img-responsive full-width" />
</div>
</a>
</div>
<div class="span6">
<div class="row">
<div class="span2">
<a href="#" class="thumbnail">
<div class="frontpage_square">
<img src="" class="img img-responsive full-width" />
</div>
</a>
</div>
<div class="span2">
<a href="#" class="thumbnail">
<div class="frontpage_square">
<img src="" class="img img-responsive full-width" />
</div>
</a>
</div>
<div class="span2">
<a href="#" class="thumbnail">
<div class="frontpage_square">
<img src="" class="img img-responsive full-width" />
</div>
</a>
</div>
</div>
<div class="row">
<div class="span2">
<a href="#" class="thumbnail">
<div class="frontpage_square">
<img src="" class="img img-responsive full-width" />
</div>
</a>
</div>
<div class="span2">
<a href="#" class="thumbnail">
<div class="frontpage_square">
<img src="" class="img img-responsive full-width" />
</div>
</a>
</div>
<div class="span2">
<a href="#" class="thumbnail">
<div class="frontpage_square">
<img src="" class="img img-responsive full-width" />
</div>
</a>
</div>
</div>
<div class="row">
<div class="span2">
<a href="#" class="thumbnail">
<div class="frontpage_square">
<img src="" class="img img-responsive full-width" />
</div>
</a>
</div>
<div class="span2">
<a href="#" class="thumbnail">
<div class="frontpage_square">
<img src="" class="img img-responsive full-width" />
</div>
</a>
</div>
<div class="span2">
<a href="#" class="thumbnail">
<div...
CSS
.frontpage_square{
position:relative;
overflow:hidden;
padding-bottom:100%;
}
.frontpage_square img{
position:absolute;
}