Foundation Grids - large equipment

The last chapter we introduced the proportion of medium-sized equipment and small equipment grid layout, small equipment for the 25% / 75% (.small-3 and .small-9), but the proportion of medium-sized equipment for 50% / 50% (.medium-6 and .medium-6):

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

On large-scale equipment, we recommend a ratio of 33% / 66%.

Tip: The screen size is larger than the definition of large equipment 64.0625em.

The use of large equipment .large-* category.

Now we add two on the large-scale equipment:

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

Resolve

• The proportion of small devices with two columns of% 25/75% ( .small-3 and .small-9 )
• The proportion of medium-sized device with two columns of% 50/50% ( .medium-6 and .medium-6 )
• The proportion of large equipment with two columns of% 33/66% ( .large-4 and .large-8 )

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

Tight use on large equipment

The following example, we specify .large-6 class (and not .medium- * .small-* ). This indicates that a large proportion of the equipment is 50% / 50%. But in the medium-sized or small appliance horizontally stacked (100% width):