Foundation Grid - Large devices


May 04, 2021 14:00 Foundation5


Table of contents


Foundation Grid - Large devices

In the previous section, we described the grid layout of medium and small devices, with 25%/75% (.small-3 and .small-9) used on small devices, but 50%/50% used on medium devices (medium-6 and .medium-6):

<div class="small-3 medium-6 columns">....</div>
<div class="small-9 medium-6 columns">....</div>

We recommend 33%/66% on large devices.

Tip: The screen size definition for large devices is greater than 64.0625em.

Use the .large-*

Now let's add two columns on a large device:

<div class="small-3 medium-6 large-4 columns">....</div>
<div class="small-9 medium-6 large-8 columns">....</div>

Analytical

  • The ratio of two columns for small devices is 25%/75% .small-3 and .small-9 )
  • The ratio of two columns for medium-sized devices is 50%/50% .medium-6 and .medium-6 )
  • The ratio of two columns for large devices is 33%/66% .large-4 and .large-8 )

Instance

< div class= "row" >
< div class= "small-3medium-6 large-4 columns" style= "background-color:yellow;" >
< The W3Cschool online tutorial slt; /p >
< /div >
< div class= "small-9medium-6 large-8 columns" style= "background-color:pink;" >
< The W3Cschool online tutorial slt; /p >
< /div >
< /div >

Try it out . . .
Foundation Grid - Large devices Note: To ensure that the number of columns adds up to 12 columns!

Use on large devices

In the following example, we specify .large-6 class (not .medium-and .small-* T his indicates a 50%/50% ratio on large devices. However, it is stacked horizontally (100% width) on medium or small devices:

Instance

< div class= "row" >
< div class= "large-6columns" style= "background-color:yellow;" >
< The W3Cschool online tutorial slt; /p >
< /div >
< div class= "large-6columns" style= "background-color:pink;" >
< The W3Cschool online tutorial slt; /p >
< /div >
< /div >

Try it out . . .