Menu icon Foundation
Add a side panel to a grid-block

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>      

         

grid-block

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>      

         
Lyn almost 5 years ago

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.