Foundation Grid - Small Devices
Suppose we have a simple grid layout on a small device, two columns, with a width ratio of 25% and 75%.
Tip:Small devices are defined as screens smaller than40.0625em。
On small devices we use.small-*class.
<div class="small-3 columns">....</div> <div class="small-9 columns">....</div>
The following example sets up two columns with a ratio of 25% and 75% (Foundation is mobile-first: if not otherwise specified, the code of the .small class will be inherited on larger devices):.small in them and use those".
Example
<div
class="row">
<div class="small-3 columns" style="background-color:yellow;">
<p>Example</p>
</div>
<div class="small-9 columns" style="background-color:pink;">
<p>Example</p>
</div>
</div>
<div class="small-3 columns" style="background-color:yellow;">
<p>Example</p>
</div>
<div class="small-9 columns" style="background-color:pink;">
<p>Example</p>
</div>
</div>
Try it Yourself »
 |
Note:Make sure the numbers add up to 12 columns! |
|---|
If you need to set a ratio of 33.3%/66.6%, you can use.small-4and.small-8:
Example
<div
class="row">
<div class="small-4 columns" style="background-color:yellow;">
<p>Example</p>
</div>
<div class="small-8 columns" style="background-color:pink;">
<p>Example</p>
</div>
</div>
<div class="small-4 columns" style="background-color:yellow;">
<p>Example</p>
</div>
<div class="small-8 columns" style="background-color:pink;">
<p>Example</p>
</div>
</div>
Try it Yourself »