Foundation Grid - Large Equipment

In the previous chapter, we introduced grid layouts for medium and small devices, with a 25%/75% ratio on small devices (.small-3 and .small-9) and a 50%/50% ratio on medium devices (.medium-6 and .medium-6):

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

On large devices, we recommend a ratio of 33%/66%.

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

Used on large equipment.large-*class.

Now we add two columns on large devices:

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

Parsing

• On small devices, the ratio of the two columns is 25%/75% (.small-3and.small-9)
• On medium devices, the ratio of the two columns is 50%/50% (.medium-6and.medium-6)
• On large devices, the ratio of the two columns is 33%/66% (.large-4and.large-8)

	Note:Make sure the numbers add up to 12 columns!

Use only on large devices

In the following example, we specified.large-6Class (not .medium-* and.small-*). This indicates that on large devices the ratio is 50%/50%. But on medium or small devices, they will stack horizontally (100% width):