Foundation
-
FollowReply
-
Add a side panel to a grid-block
byDaniel Saturday, June 14, 2014 at 2:50 PM EST
I am trying to create a block-grid layout that holds a random amount of items and a panel on the top left side that has the width of one block-grid-item, and the height of two block-grid-items including the padding. Essentially the same layout as http://500px.com/popular
I already got the base layout, but it is slightly misplaced. I would appreciate if you could help me adjusting the layout.
Here is what I got (http://jsfiddle.net/VFEYC/3/)
<div class="row">
<div class="small-9 small-centered column">
<div class="row">
<div class="small-4 medium-4 column">
<img src="http://placehold.it/256x512&text=PANEL"/>
</div>
<div class="small-8 medium-8 column">
<ul class="small-block-grid-1 medium-block-grid-2 large-block-grid-3">
<!-- EVER ONLY FOUR ITEMS HERE -->
<li><img src="http://placehold.it/256&text=ROW-1"/></li>
<li><img src="http://placehold.it/256&text=ROW-1"/></li>
<li><img src="http://placehold.it/256&text=ROW-1"/></li>
<li><img src="http://placehold.it/256&text=ROW-1"/></li>
</ul>
</div>
</div>
</div>
</div>
<div class="row">
<div class="small-9 small-centered column">
<div class="row">
<ul class="small-block-grid-2 medium-block-grid-3 large-block-grid-4">
<!-- RANDOM AMOUNT OF ITEMS HERE -->
<li><img src="http://placehold.it/256&text=ROW-2"/></li>
<li><img src="http://placehold.it/256&text=ROW-2"/></li>
<li><img src="http://placehold.it/256&text=ROW-2"/></li>
<li><img src="http://placehold.it/256&text=ROW-2"/></li>
<li><img src="http://placehold.it/256&text=ROW-2"/></li>
<li><img src="http://placehold.it/256&text=ROW-2"/></li>
<li><img src="http://placehold.it/256&text=ROW-2"/></li>
</ul>
</div>
</div>
</div>
Hey there,
Here is the best I could end up with in a short amount of time but it may give you more ideas on how to tweak it : http://jsfiddle.net/6A7WH/3/
You just have to tweak a bit the columns margin for the first row I guess.
Regards,
Lyn.