Foundation Grid - Stack horizontally


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

Try it out . . .
Foundation Grid - Stack horizontally 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!