Posts in current category
May 04, 2021 14:00 Foundation5
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.
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>
|Note: To ensure that the number of columns adds up to 12 columns!|
In the following example, we specify
class (not .medium-and
his indicates a 50%/50% ratio on large devices.
However, it is stacked horizontally (100% width) on medium or small devices: