Foundation Grid - Large devices

Foundation Grid - Large devices

In the previous section, we described the grid layout of medium and small devices, with 25%/75% (.small-3 and .small-9) used on small devices, but 50%/50% used on medium devices (medium-6 and .medium-6):

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

We recommend 33%/66% on large devices.

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

Use the .large-*

Now let's add two columns on a large device:

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

Analytical

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

	Note: To ensure that the number of columns adds up to 12 columns!

Use on large devices

In the following example, we specify .large-6 class (not .medium-and .small-* T his indicates a 50%/50% ratio on large devices. However, it is stacked horizontally (100% width) on medium or small devices: