W3.CSS Grid
W3.CSS provides an efficient way to arrange elements properly in different size of screen display. It is very important to handle elements to make it looks better because websites are supposed to be accessed using different devices like mobiles/tablets/desktop and the screen size of these devices are vary from one another.
W3.CSS grid is combination of rows and columns. Grids are responsive, columns are arranged itself automatically on different screen size. On larger screen contents are organized into columns but on smaller screen the contents are stacked on the top of each other.
w3-row is container class used to define row. [w3-row-padding is used to define row with 08px left and right padding.]
w3-col is container class used to define each column in the row. Each row can have maximum 12 columns.
The subclasses are also used with w3-col class to define column width and number of column to be appeared on different screen size.
For small screen (Mobile phones) s1, s2, s3, s4, ….., s12 sub classes are for defining column width and number of column on smaller screen [s1 means 8.33% width of display screen, s2 means 16.66% width of display screen and so on].
For medium screen (Tablets) m1, m2, m3, m4, ….., m12 sub classes are for defining column width and number of column on medium screen. [m1 means 8.33% width of display screen, m2 means 16.66% width of display screen and so on].
For large screen (PC/Laptop)
l1, l2, l3, l4, ….., l12 sub classes are for defining column width and number of column on large screen [l1 means 8.33% width of display screen, l2 means 16.66% width of display screen and so on].
Example:
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div class="w3-row w3-panel w3-large">
<p class="w3-aqua w3-padding"> There are 12 columns in this row, each having 8.33%
space of entire screen width:</p>
<div class="w3-col l1 w3-border w3-padding">col1 </div>
<div class="w3-col l1 w3-border w3-padding ">col2 </div>
<div class="w3-col l1 w3-border w3-padding ">col3 </div>
<div class="w3-col l1 w3-border w3-padding ">col4 </div>
<div class="w3-col l1 w3-border w3-padding ">col5 </div>
<div class="w3-col l1 w3-border w3-padding ">col6 </div>
<div class="w3-col l1 w3-border w3-padding ">col7 </div>
<div class="w3-col l1 w3-border w3-padding ">col8 </div>
<div class="w3-col l1 w3-border w3-padding ">col9 </div>
<div class="w3-col l1 w3-border w3-padding ">col10 </div>
<div class="w3-col l1 w3-border w3-padding ">col11 </div>
<div class="w3-col l1 w3-border w3-padding ">col12 </div>
</div>
</body>
</html>
- 8
- 12
- 14
- 16