I'm trying to create a responsive grid, where two rows of smaller items are in line with a bigger element.
What I'm trying to achieve:
What I have:
#thumbs {
background-color: lightcoral;
width: 100%;
margin-top: 90px;
margin-left: auto;
margin-right: auto;
text-align: justify;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
}
#thumbs div {
vertical-align: top;
display: inline-block;
*display: inline;
zoom: 1;
}
.stretch {
width: 100%;
display: inline-block;
font-size: 0;
line-height: 0
}<div class=container>
<div id="thumbs">
<div>
<a id="single_image1" href="#"><img src="http://dummyimage.com/300x200/444/fff" alt="" /></a>
</div>
<div>
<a id="single_image3" href="#"><img src="http://dummyimage.com/100x100/444/fff" alt="" /></a>
</div>
<div>
<a id="single_image3" href="#"><img src="http://dummyimage.com/100x100/444/fff" alt="" /></a>
</div>
<div>
<a id="single_image3" href="#"><img src="http://dummyimage.com/100x100/444/fff" alt="" /></a>
</div>
<div>
<a id="single_image3" href="#"><img src="http://dummyimage.com/100x100/444/fff" alt="" /></a>
</div>
<div>
<a id="single_image3" href="#"><img src="http://dummyimage.com/100x100/444/fff" alt="" /></a>
</div>
<div>
<a id="single_image3" href="#"><img src="http://dummyimage.com/100x100/444/fff" alt="" /></a>
</div>
<div>
<a id="single_image3" href="#"><img src="http://dummyimage.com/100x100/444/fff" alt="" /></a>
</div>
<div>
<a id="single_image3" href="#"><img src="http://dummyimage.com/100x100/444/fff" alt="" /></a>
</div>
<div>
<a id="single_image3" href="#"><img src="http://dummyimage.com/100x100/444/fff" alt="" /></a>
</div>
<div>
<a id="single_image3" href="#"><img src="http://dummyimage.com/100x100/444/fff" alt="" /></a>
</div>
<div>
<a id="single_image3" href="#"><img src="http://dummyimage.com/100x100/444/fff" alt="" /></a>
</div>
<div>
<a id="single_image3" href="#"><img src="http://dummyimage.com/100x100/444/fff" alt="" /></a>
</div>
<span class="stretch"></span>
</div>
</div>jsfiddle: http://jsfiddle.net/7985xjud/
I have also tried flexbox:
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-around;
}
.flex-item {
background: tomato;
padding: 5px;
margin-top: 10px;
line-height: 60px;
color: white;
font-weight: bold;
font-size: 2em;
text-align: center;
}
.big-item {
width: 300px;
height: 150px;
}
.small-item {
width: 100px;
height: 60px;
}<ul class="flex-container">
<li class="flex-item big-item">1</li>
<li class="flex-item small-item">2</li>
<li class="flex-item small-item">3</li>
<li class="flex-item small-item">4</li>
<li class="flex-item small-item">5</li>
<li class="flex-item small-item">6</li>
<li class="flex-item small-item">7</li>
</ul>codepen: https://codepen.io/anon/pen/dRBKWr
How can I do that?