Posts in current category

# Foundation Grid - Large devices

May 04, 2021 14:00 Foundation5

## 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 . . .
 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 . . .