❮ Foundation Pagination Foundation Grid Medium ❯

Foundation Grid Examples

Below are some commonly used grid examples we've collected.

Three Equal Columns

This example demonstrates how to create three equal columns (33.3%/33.3%/33.3%), displaying three columns on medium and large devices, and automatically stacking on small devices:

Example

<div class="row">  
    <div class="medium-4 columns" style="background-color:yellow;">    
        <p>.medium-4</p>  
    </div>  
    <div class="medium-4 columns" style="background-color:pink;">    
        <p>.medium-4</p>  
    </div>  
    <div class="medium-4 columns" style="background-color:yellow;">    
        <p>.medium-4</p>  
    </div>
</div>

Three Unequal Columns

This example demonstrates how to create three unequal columns (25%/50%/25%), displaying three columns on medium and large devices, and automatically stacking on small devices:

Example

<div class="row">  
    <div class="medium-3 columns" style="background-color:yellow;">    
        <p>.medium-3</p>  
    </div>  
    <div class="medium-6 columns" style="background-color:pink;">    
        <p>.medium-6</p>  
    </div>  
    <div class="medium-3 columns" style="background-color:yellow;">    
        <p>.medium-3</p>  
    </div>
</div>

Two Equal Columns

This example demonstrates how to create two equal columns (50%/50%), with the columns always being 50%/50% on small, medium, and large devices:

Example

<div class="row">  
    <div class="small-6 columns" style="background-color:yellow;">    
        <p>.small-6</p>  
    </div>  
    <div class="small-6 columns" style="background-color:pink;">    
        <p>.small-6</p>  
    </div>
</div>

Two Unequal Columns

This example demonstrates how to create two unequal columns (33.3%/66.6%), with the columns always being 33.3%/66.6% on small, medium, and large devices:

Example

<div class="row">  
    <div class="small-8 columns" style="background-color:yellow;">    
        <p>.small-8</p>  
    </div>  
    <div class="small-4 columns" style="background-color:pink;">    
        <p>.small-4</p>  
    </div>
</div>

Modifying Column Order

Modify the order of columns using the .small|medium|large-push-* and .small|medium|large-pull-* classes:

Example

<div class="row">  
    <div class="small-4 small-8-push columns" style="background-color:yellow;">    
        <p>.small-4 .small-8-push</p>  
    </div>  
    <div class="small-8 small-4-pull columns" style="background-color:pink;">    
        <p>.small-8 .small-4-pull</p>  
    </div>
</div>

Nested Columns

You can use nested grids (columns within columns):

Example

<div class="row">  
    <div class="small-8 columns">.small-8    
        <div class="row">      
            <div class="small-8 columns">.small-8 Nested        
                <div class="row">          
                    <div class="small-8 columns">.small-8 Nested Again</div>          
                    <div class="small-4 columns">.small-4</div>        
                </div>      
            </div>      
            <div class="small-4 columns">.small-4</div>    
        </div>  
    </div>  
    <div class="small-4 columns">.small-4</div>
</div>

Mix: Mobile, Desktop

The Foundation grid system has three columns: .small-* (mobile), .medium-* (tablet), and .large-* (desktop). These classes can be dynamically combined for a more flexible layout:

Tip: Each class can be scaled up. If you want the same width for small and large screen devices, you can specify .small-*.

Example

<div class="row">  
    <div class="small-6 large-8 columns">.small-6 .large-8</div>  
    <div class="small-6 large-4 columns">.small-6 .large-4</div>
</div>
<div class="row">  
    <div class="small-2 large-4 columns">.small-2 .large-2</div>  
    <div class="small-4 large-4 columns">.small-4 .large-2</div>  
    <div class="small-6 large-4 columns">.small-6 .large-2</div>
</div>
<div class="row">  
    <div class="small-3 large-5 columns">.small-3 .large-5</div>  
    <div class="small-9 large-7 columns">.small-9 .large-7</div>
</div>

Mix: Mobile, Tablet, and Desktop

Example

<div class="row">  
    <div class="medium-6 large-8 columns">.medium-6 .large-8</div>  
    <div class="medium-6 large-4 columns">.medium-6 .large-4</div>
</div>
<div class="row">  
    <div class="small-4 medium-3 large-7 columns">.small-4 .medium-3 .large-7</div>  
    <div class="small-4 medium-6 large-3 columns">.small-4 .medium-6 .large-3</div>  
    <div class="small-4 medium-3 large-2 columns">.small-4 .medium-3 .large-2</div>
</div>

Centered Columns

Center columns using the .small-centered class. Medium and large devices can inherit the centering from small devices, but you need to set the .large-centered class on large devices.

Example

<div class="row">  
    <div class="small-4 small-centered columns">small-4 small-centered</div>
</div>
<div class="row">  
    <div class="small-6 small-centered columns">small-6 small-centered</div>
</div>
<div class="row">  
    <div class="small-6 large-centered columns">small-6 large-centered</div>
</div>
<div class="row">  
    <div class="small-8 small-centered large-uncentered columns">small-8 small-centered large-uncentered</div>
</div>
<div class="row">  
    <div class="small-10 small-centered columns">small-10 small-centered</div>
</div>

Column Offsets

Use the .large-offset-* (or .small-offset-*) class to offset columns to the right. The number of columns to offset is controlled by the * symbol:

Example

<div class="row">  
    <div class="large-1 columns">1</div>  
    <div class="large-11 columns">11</div>
</div>
<div class="row">  
    <div class="large-1 columns">1</div>  
    <div class="large-10 large-offset-1 columns">10, offset 1</div>
</div>
<div class="row">  
    <div class="large-1 columns">1</div>  
    <div class="large-9 large-offset-2 columns">9, offset 2</div>
</div>
<div class="row">  
    <div class="large-1 columns">1</div>  
    <div class="large-8 large-offset-3 columns">8, offset 3</div>
</div>

Incomplete Columns

If the sum of the columns in a row is not 12, Foundation will automatically float the last column to the right and fill the remaining space with white space.

The optional .end class can be used to float the last column element to the left:

Example

<div class="row">  
    <div class="medium-3 columns">.medium-3</div>  
    <div class="medium-3 columns">.medium-3</div>  
    <div class="medium-3 columns">.medium-3</div>
</div>
<div class="row">  
    <div class="medium-3 columns">.medium-3</div>  
    <div class="medium-3 columns">.medium-3</div>  
    <div class="medium-3 columns end">.medium-3 .end</div>
</div>

The grid (.row) has a maximum width (max-width) of 62.5rem. On wider screens, the size may exceed 62.5rem, causing columns to not fully fill the page even when set to 100% width. However, we can adjust the max-width using CSS:

Example

<style>.row { max-width: 100%; }</style>

If you want to use the default max-width but need the background color to span the entire page, apply the .row class to the container element and specify the desired background color:

Example

<div style="background-color:coral;padding:25px;">
  <div class="row">
    <div class="small-6 columns" style="background-color:yellow;">.small-6</div>
    <div class="small-6 columns" style="background-color:pink;">.small-6</div>
  </div>
</div>

❮ Foundation Pagination Foundation Grid Medium ❯