Menu icon Foundation
Block grid inside a grid?

I wish to have a block grid inside of a normal grid, taking up 10 columns, with a label taking up the other 2.

The problem is the block grid is overflowing its allocated 10 columns and is pushing up to my label.

Where am I going wrong?

<div class="row">          	          
    <div class="medium-2 columns">
        <label for="" class="right inline">Gallery:</label>
    </div>
    <div class="medium-10 columns">
       <ul class="small-block-grid-3 small-centered">
  	        <li class="img-drop-zone">a</li>
  			<li class="img-drop-zone">b</li>
  			<li class="img-drop-zone">c</li>
  			<li class="img-drop-zone">d</li>
  			<li class="img-drop-zone">e</li>
  	    </ul>
  	</div>
</div>
            

         

block gridgrid

I wish to have a block grid inside of a normal grid, taking up 10 columns, with a label taking up the other 2.

The problem is the block grid is overflowing its allocated 10 columns and is pushing up to my label.

Where am I going wrong?

<div class="row">          	          
    <div class="medium-2 columns">
        <label for="" class="right inline">Gallery:</label>
    </div>
    <div class="medium-10 columns">
       <ul class="small-block-grid-3 small-centered">
  	        <li class="img-drop-zone">a</li>
  			<li class="img-drop-zone">b</li>
  			<li class="img-drop-zone">c</li>
  			<li class="img-drop-zone">d</li>
  			<li class="img-drop-zone">e</li>
  	    </ul>
  	</div>
</div>
            

         
Rafi Benkual over 5 years ago

It's hard to tell what you mean by overflowing. I made a demo with your code. It seems to be working as you expect http://cdpn.io/KiJoj

Can you please give more detail about what is not the way you expect and maybe a screenshot?

Karl Ward over 5 years ago

The block-grid has a different working concept that the standard grid. With the block-grid you basically decide how many elements you want in a row, and you have set 3 small-block-grid-3 ... Since you have 5 elements, the first 3 will fill the width, and the remaining 2 will break into a new line. If you want all 5 in a single row, you would use small-block-grid-5.

Panthro over 5 years ago

@Rafi Benkual

If you add a border to each .ing-drop-zone, you'll see what I mean, it overflows the grid.

.img-drop-zone{
    border: 1px solid black;
}