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">/en/en</div> <div class="small-9 medium-6 columns">/en/en</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">/en/en</div> <div class="small-9 medium-6 large-8 columns">/en/en</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
)
Examples
<Div class = "small-3 medium-6 large-4 columns" style = "background-color: yellow;">
<P> This tutorial </ p>
</ Div>
<Div class = "small-9 medium-6 large-8 columns" style = "background-color: pink;">
<P> This tutorial </ p>
</ Div>
</ Div>
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):
Examples
<Div class = "large-6 columns" style = "background-color: yellow;">
<P> This tutorial </ p>
</ Div>
<Div class = "large-6 columns" style = "background-color: pink;">
<P> This tutorial </ p>
</ Div>
</ Div>