Foundation Block Grid

Block grids are used to evenly distribute content across a page: for example, if you want to display four images in a row, they need to be evenly spaced regardless of the screen size.

You can create a block grid using the <ul> element along with the .small|medium|large-block-grid- class. The num is used to specify the number of items to be evenly distributed:

Example

<ul class="small-block-grid-3">  <li><img src="newyork.jpg" 
    alt="New York"></li>  <li><img src="paris.jpg" alt="Paris"></li>  
    <li><img src="sanfran.jpg" alt="San Francisco"></li></ul>

Another example, using paragraphs:

Example

<ul class="small-block-grid-3">  <li><p>Just a Simple Example 
    Text...</p></li>  <li><p>Just a Simple Example Text...</p></li>  
    <li><p>Just a Simple Example Text...</p></li></ul>

Different Number of Items for Different Screen Sizes

By adding multiple block grid classes, you can set a different number of items for different screen sizes:

Example

<ul class="small-block-grid-2 medium-block-grid-3 large-block-grid-4">  
    <li><img src="newyork.jpg" alt="New York"></li>  <li><img src="paris.jpg" 
    alt="Paris"></li>  <li><img src="sanfran.jpg" alt="San 
    Francisco"></li>  <li><img src="newyork.jpg" alt="New York"></li>
    </ul>