In one of our previous articles, we started our discussion about W3CSS layouts. We use classes like w3-third, w3-twothird etc to create responsive layouts. In the end of that article we also studied that W3CSS Grid system supports 12 columns. By 12 columns we mean that each row is further divided into 12 columns. And the number of columns taken up by a certain element depends upon screen size. This might sound bit tricky but the code samples in this article shall make it easier to understand.
W3CSS Grid system targets three screen sizes: small screens such as mobiles, medium screens such as tablets and large screens such as desktop. A responsive layout adjusts itself according to changing screen size. A row is created using w3-row class. Inside each row you can create maximum of 12 columns. A column is specified by w3-col class. Now for each screen size, w3CSS provides a different class.
For small size the class name starts with “s” followed by the number of columns to take. For instance the div with class s3 will take three columns on the small screen. For medium size the class name starts with “m” followed by the number of columns to take. For instance the div with class m3 will take three columns on medium screen. It is important to note that the sum of all the columns should be equal to 12. Lets take help of a simple example.
In the following example we have a row that has two further divs. The first div takes 12 columns on the small screen and the second div shall also take 12 columns on the small screen because we have not specified the columns size for small screen. For medium screen,the first div will take 6 columns i.e. 50% of the width and the second column will also take 50% of the width. This is because both the first and second div has class m6. Finally on large, screen the first div will take 16.66% of the width because it has class l2. Similarly the second div will take 83.33% of the width since it has size l10. 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 m6 l2 w3-red"> <p>This div covers 12 colum on smal, 6 colomns on medium and 2 columns on large screens</p> </div> <div class="w3-col m6 l10 w3-blue"> <p>This div covers 12 colum on smal, 6 colomns on medium and 10 columns on large screens</p> </div> </div> </body> </html>
Open the above page in browser, shrink the browser size to mobile size. You shall see both the red and blue div take whole screen.
Now gradually increase the size of browser, once it reaches medium size, both red and blue screen take half of the width of the window.
Finally increase the browser to desktop size, you shall see red div occupy 2 columns and blue div occupy 10 columns.