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.

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.

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.