-
Reply
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.