Foundation Grid - Small devices
May 04, 2021 Foundation5
Table of contents
Foundation Grid - Small devices
Let's say we have a simple grid layout on a small device, two columns, with a width ratio of 25% and 75%.
Tip: A
small device is defined as a
40.0625em
On small devices,
.small-*
class.
<div class="small-3 columns">....</div> <div class="small-9 columns">....</div>
The following instances have two columns set up at a scale of 25% and 75% (Foundation is mobile first: if no special instructions are given, code for the .small class is inherited on large devices):
.small
in them and use those".
Instance
<
div
class=
"row"
>
< div class= "small-3columns" style= "background-color:yellow;" >
< The W3Cschool online tutorial slt; /p >
< /div >
< div class= "small-9columns" style= "background-color:pink;" >
< The W3Cschool online tutorial slt; /p >
< /div >
< /div >
< div class= "small-3columns" style= "background-color:yellow;" >
< The W3Cschool online tutorial slt; /p >
< /div >
< div class= "small-9columns" style= "background-color:pink;" >
< The W3Cschool online tutorial slt; /p >
< /div >
< /div >
Try it out . . .
|
Note: To ensure that the number of columns adds up to 12 columns! |
|---|
If you need to set a ratio of 33.3%/66.6%,
.small-4
.small-8
:
Instance
<
div
class=
"row"
>
< div class= "small-4 columns " style= "background-color:yellow;" >
< The W3Cschool online tutorial slt; /p >
< /div >
< div class= "small-8 columns " style= "background-color:pink;" >
< The W3Cschool online tutorial slt; /p >
< /div >
< /div >
< div class= "small-4 columns " style= "background-color:yellow;" >
< The W3Cschool online tutorial slt; /p >
< /div >
< div class= "small-8 columns " style= "background-color:pink;" >
< The W3Cschool online tutorial slt; /p >
< /div >
< /div >
Try it out . . .