Foundation Grid - Stack horizontally
May 04, 2021 Foundation5
Table of contents
Foundation Grid - Stack horizontally
The following example creates a basic grid system that is horizontally tiled on PC and tablet devices and stacked horizontally on small devices such as mobile phones.
Instance
<
div
class=
"row"
>
< div class= "medium-6columns" style= "background-color:yellow;" >
< The W3Cschool online tutorial slt; /p >
< /div >
< div class= "medium-6columns" style= "background-color:pink;" >
< The W3Cschool online tutorial slt; /p >
< /div >
< /div >
< div class= "medium-6columns" style= "background-color:yellow;" >
< The W3Cschool online tutorial slt; /p >
< /div >
< div class= "medium-6columns" style= "background-color:pink;" >
< The W3Cschool online tutorial slt; /p >
< /div >
< /div >
Try it out . . .
|
Tip:
The number | .small | the number in the
.small|medium|large-*
specifies the number of columns that are spanned.
Therefore,
.small-1
1 column,
.small-4
4 columns,
.small-6
6 columns (50% width), and so on.
Note: To ensure that the number of columns adds up to 12 columns! |
|---|