W3CSS Grid Advanced

In the previous article, we started our discussion W3CSS grid. In this article we shall study some W3CSS grid advanced concepts. Let’s recapitulate what we already know. To create a responsive grid, we need to create a div with class “w3-row”. Inside the div, to create columns we need to create divs with class w3-col. And for each individual screen size we use classes such as sx, mx, and lx where s is for small, m is for medium, l is for large an x is the number of columns. In this article we shall see how to create two equal and unequal column grid as well as three equal and unequal column grid.

Two equal and unequal columns

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 shall also take 6 columns on the small screen. Since we have not specified the columns size for medium and large screen sizes. The column size for small screen will be applicable to them. Notice that if column size for a larger screen is not specified the column size for immediate smaller screen is applicable to larger screen as well. Therefore, column size for small screen will be applicable for large screen as well. Next, we again create a row that has two further div. The first div takes 4 columns on the small screen and the second div takes 8 columns on the small screen. 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 w3-red">
    <p>This div covers 6 columns on all screens</p>
  </div>
  <div class="w3-col s6 w3-blue">
    <p>This div covers 6 columns on all screens</p>
  </div>
</div>
    
    <br>
    
<div class="w3-row">
  <div class="w3-col s8 w3-red">
    <p>This div covers 8 columns on all screens</p>
  </div>
  <div class="w3-col s4 w3-blue">
    <p>This div covers 4 columns on all screens</p>
  </div>
</div>


</body>
    
</html>

Download the code Try the code

Three equal and unequal columns

In the following example we have a row that has three further divs. All the three divs take 4 columns on the small screen. Next, we again create a row that has three further divs. The first div takes 2 columns, the second div takes four columns and the third div takes 6 columns on the small screen. 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 s4 w3-red">
    <p>This div covers 4 columns on all screens</p>
  </div>
  <div class="w3-col s4 w3-blue">
    <p>This div covers 4 columns on all screens</p>
  </div>
    <div class="w3-col s4 w3-green">
    <p>This div covers 4 columns on all screens</p>
  </div>
</div>
    
    <br>
    
<div class="w3-row">
  <div class="w3-col s2 w3-red">
    <p>This div covers 2 columns on all screens</p>
  </div>
  <div class="w3-col s4 w3-blue">
    <p>This div covers 4 columns on all screens</p>
  </div>
    <div class="w3-col s6 w3-green">
    <p>This div covers 6 columns on all screens</p>
  </div>
</div>


</body>
    
</html>

Download the code Try the code

<<< W3CSS GridW3CSS Mixed Grid layouts >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .