W3CSS Mixed Grid layouts

In the previous article we saw how to create two and three columns equal and unequal grids. In this article we shall see how to create mixed grids. By mixes grid layouts we refer to layouts that look different on different screens. In this article we shall first create mixed layout for mobile and desktops and then for mobile, tablets and desktop. So let the fun begin.

Mixed Layout for Mobile and Desktop

To create mixed layout for mobile and desktop screens, you have to use two “s” and “l”. The former is used to specify column size for small screens or mobiles while the latter specifies screen size for large screens or desktop. Take a look at the following example.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

<div class="w3-row">
  <div class="w3-col s6 l4 w3-red">
    <p>This div covers 6 colum on small screens and  4 columns on large screens</p>
  </div>
  <div class="w3-col s6 l8 w3-blue">
    <p>This div covers 6 colum on small screens and 8 columns on large screens</p>
  </div>
</div>


</body>
    
</html>

Download the code Try the code

In the following example we have a row that has two further divs. The first div takes 6 columns on the small screen and the second div also take 6 columns on the small screen. For large screen,the first div will take 4 columns i.e. 33% of the width and the second column will takes eight columns i.e. 66% of the width.

Mixed Layout for Mobile, Tablet & Desktop

To create mixed layout for mobile, tablet & desktop screens, you have to use two “s”, “m” “l”. The former is used to specify column size for small screens or mobiles while the latter specifies screen size for large screens or desktop. The “m” specifies screen size for medium class. Take a look at the following example.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

<div class="w3-row">
  <div class="w3-col s8 m6 l2 w3-red">
    <p>This div covers 8 colum on small, 6 colomns on medium and  2 columns on large screens</p>
  </div>
  <div class="w3-col s4 m6 l10 w3-blue">
    <p>This div covers 4 colum on small, 6 colomns on medium and  10 columns on large screens</p>
  </div>
</div>


</body>
    
</html>

Download the code Try the code

In the following example we have a row that has two further divs. The first div takes 4 columns on the small screen and the second div takes 8 columns on the small screen. For medium screen or tablets,the first div will take 6 columns i.e. 50% of the width and the second column will also takes 6 columns i.e. 50% of the width. For large screen,the first div will take 2 columns i.e. 16.66% of the width and the second column will takes 10 columns i.e. 83.33% of the width.

Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .