Introduction
This chapter demonstrates about the W3CSS Grid which supports 12 column responsive fluid grid and following are the concepts covered in this chapter.
- Responsive Grid & Rows
- Two Equal & Unequal Columns
- Three Equal & Unequal Columns
- Six Columns
- W3-rest
Description
In W3.CSS Grid system is responsive and in which columns are re-arranged automatically based on the screen size. Organization of content depends on the screen size, in big screen three coloumn organization looking better. Columns must reside an inside of a row must be responsive. The table below demonstrates the responsive rows and columns.
The table below demonstrates the w3-col sub classes which consist of columns of a small screen and medium screens and large screens these are related to smart phones and tablets and laptops as shown.
| Class | Description |
|---|---|
| w3-row | Which defines a padding-less container for responsive columns. |
| w3-row-padding | Which padded container for responsive columns. |
| w3-col | Which columns with subclasses. |
| Class | Description | ||
|---|---|---|---|
| small screens | medium screens | large screens | |
| s1 | m1 | l1 | define 1 of 12 coloumns with width of 08.33% |
| s2 | m2 | l2 | define 1 of 12 coloumns with width of 16.66% |
| s3 | m3 | l3 | define 1 of 12 coloumns with width of 25.00% |
| s4 | m4 | l4 | define 1 of 12 coloumns with width of 33.33% |
| s5-11 | m5-11 | l5-11 | |
| s12 | m12 | l12 | define 1 of 12 coloumns with width of 100% |
Description
By using W3.CSS user cn built the Two Equal Width columns i.e 50%/50% on all screen sizes. The code below demonstrates the two equal columns as shown.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>Two Equal Columns</h2>
</div>
<div class="w3-row">
<div class="w3-col s6 w3-blue w3-center">
<p>sp</p>
</div>
<div class="w3-col s6 w3-grey w3-center">
<p>sp</p>
</div>
</div>
<div class="w3-row w3-container">
<p>Inside a container:</p>
<div class="w3-col s6 w3-blue w3-center">
<p>sp</p>
</div>
<div class="w3-col s6 w3-grey w3-center">
<p>sp</p>
</div>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Two Unequal Coloumns
By using W3.CSS user can also built the two Unequal coloumns with width of 25%/75% on all screen sizes which is shown in the below code.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>Two Unequal Columns</h2>
</div>
<div class="w3-row">
<div class="w3-col s3 w3-blue w3-center">
<p>sp</p>
</div>
<div class="w3-col s9 w3-grey w3-center">
<p>sp</p>
</div>
</div>
<div class="w3-row w3-container">
<p>Inside a container:</p>
<div class="w3-col s3 w3-blue w3-center">
<p>sp</p>
</div>
<div class="w3-col s9 w3-grey w3-center">
<p>sp</p>
</div>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Description
In W3.CSS user can built the three equal width of coloumns i.e 33.3%/33.3%/33.3% on all screen sizes. The code below demnstrates the three equal columns as shown below.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>Three Equal Columns</h2>
</div>
<div class="w3-row">
<div class="w3-col s4 w3-blue w3-center">
<p>s4</p>
</div>
<div class="w3-col s4 w3-grey w3-center">
<p>s4</p>
</div>
<div class="w3-col s4 w3-aqua w3-center">
<p>s4</p>
</div>
</div>
<div class="w3-row w3-container">
<p>Inside a container:</p>
<div class="w3-col s4 w3-blue w3-center">
<p>s4</p>
</div>
<div class="w3-col s4 w3-grey w3-center">
<p>s4</p>
</div>
<div class="w3-col s4 w3-aqua w3-center">
<p>s4</p>
</div>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Three Unequal Columns
In W3.CSS user can also be built the Three Unequal Columns with various width i.e 25%/50%/25% which is on tablets, laptops and desktops in which columns are automatically stack with 100% width. The code below demonstrates the Three Unequal columns as shown.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>Three Unequal Columns</h2>
</div>
<div class="w3-row">
<div class="w3-col m3 w3-blue w3-center">
<p>m3</p>
</div>
<div class="w3-col m6 w3-grey w3-center">
<p>m6</p>
</div>
<div class="w3-col m3 w3-aqua w3-center">
<p>m3</p>
</div>
</div>
<div class="w3-row w3-container">
<p>Inside a container:</p>
<div class="w3-col m3 w3-blue w3-center">
<p>m3</p>
</div>
<div class="w3-col m6 w3-grey w3-center">
<p>m6</p>
</div>
<div class="w3-col m3 w3-aqua w3-center">
<p>m3</p>
</div>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Description
By using W3.CSS user can built the six equal width coloumns which ocupies 16% of ecah on tablets, laptops and desktops these are responsive on mobile phone coloumns are automatically stack with 100% width. The code below demonstrates the Six Columns as shown.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>Six Columns</h2>
</div>
<div class="w3-row">
<div class="w3-col m2 w3-blue w3-center">
<p>m2</p>
</div>
<div class="w3-col m2 w3-grey w3-center">
<p>m2</p>
</div>
<div class="w3-col m2 w3-aqua w3-center">
<p>m2</p>
</div>
<div class="w3-col m2 w3-lime w3-center">
<p>m2</p>
</div>
<div class="w3-col m2 w3-black w3-center">
<p>m2</p>
</div>
<div class="w3-col m2 w3-purple w3-center">
<p>m2</p>
</div>
</div>
<div class="w3-row w3-container">
<p>Inside a container:</p>
<div class="w3-row">
<div class="w3-col m2 w3-blue w3-center">
<p>m2</p>
</div>
<div class="w3-col m2 w3-grey w3-center">
<p>m2</p>
</div>
<div class="w3-col m2 w3-aqua w3-center">
<p>m2</p>
</div>
<div class="w3-col m2 w3-lime w3-center">
<p>m2</p>
</div>
<div class="w3-col m2 w3-black w3-center">
<p>m2</p>
</div>
<div class="w3-col m2 w3-purple w3-center">
<p>m2</p>
</div>
</div>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Description
In W3.CSS User can get the left of the grid column by using the w3-rest class and which is an powerful and flexible class. The code below demonstrates the w3-rest class as shown below.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>Using w3-rest</h2>
<p>The w3-rest class will use what's left of the grid column.</p>
</div>
<div class="w3-row">
<div class="w3-col w3-container w3-blue" style="width:150px"><p>150px</p></div>
<div class="w3-rest w3-container w3-purple"><p>w3-rest</p></div>
</div>
<br>
<div class="w3-row">
<div class="w3-col w3-right w3-container w3-blue" style="width:75px"><p>75px</p></div>
<div class="w3-rest w3-container w3-black"><p>w3-rest</p></div>
</div>
<br>
<div class="w3-row">
<div class="w3-col w3-left w3-container w3-blue" style="width:100px"><p>100px</p></div>
<div class="w3-col w3-right w3-container w3-blue" style="width:100px"><p>100px</p></div>
<div class="w3-rest w3-container w3-lime"><p>w3-rest</p></div>
</div>
<br>
<div class="w3-row">
<div class="w3-quarter w3-container w3-yellow"><p>quarter</p></div>
<div class="w3-half">
<div class="w3-row">
<div class="w3-col w3-container w3-blue" style="width:20%"><p>80px</p></div>
<div class="w3-rest w3-container w3-grey"><p>w3-rest</p></div>
</div>
</div>
<div class="w3-quarter w3-container w3-purple"><p>quarter</p></div>
</div>
<br>
<div class="w3-row">
<div class="w3-quarter w3-container w3-black"><p>quarter</p></div>
<div class="w3-quarter w3-container w3-purple"><p>quarter</p></div>
<div class="w3-half">
<div class="w3-row">
<div class="w3-col w3-container w3-blue" style="width:35%"><p>35%</p></div>
<div class="w3-rest w3-container w3-grey"><p>w3-rest</p></div>
</div>
</div>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Key Points
- InW3.CSS W3-rest is a powerfull and flexible class.
- User can built equal and unequal columns.
- W3-col divided into several subclasses.