Foundation Grid - Small devices


May 04, 2021 13:00 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 >

Try it out . . .
Foundation Grid - Small devices 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 >

Try it out . . .