Foundation Grid - Large Devices

In the previous section, we introduced the grid layout for medium and small devices. The proportions used on small devices are 25%/75% (.small-3 and .small-9), but on medium devices, the proportions are 50%/50% (.medium-6 and .medium-6):

<div class="small-3 medium-6 columns">....</div>
<div class="small-9 medium-6 columns">....</div>

For large devices, we recommend a proportion of 33%/66%.

Note: The screen size for large devices is defined as greater than 64.0625em.

Use the .large-* class for large devices.

Now, let's add two columns for large devices:

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

Analysis

• The proportion for two columns on small devices is 25%/75% (.small-3 and .small-9)
• The proportion for two columns on medium devices is 50%/50% (.medium-6 and .medium-6)
• The proportion for two columns on large devices is 33%/66% (.large-4 and .large-8)

Example

<div class="row">
  <div class="small-3 medium-6 large-4 columns" style="background-color:yellow;">
    <p>tutorialpro.org</p>
  </div>
  <div class="small-9 medium-6 large-8 columns" style="background-color:pink;">
    <p>tutorialpro.org</p>
  </div>
</div>

| | Note: Ensure the columns add up to 12 columns! | | --- | --- |

Use Only on Large Devices

In the following example, we specify the .large-6 class (not .medium-* and .small-*). This indicates a proportion of 50%/50% on large devices. However, on medium or small devices, it will stack horizontally (100% width):

Example

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