W3.CSS Tutorial
Selected Reading
- W3.CSS - Discussion
- W3.CSS - Useful Resources
- W3.CSS - Quick Guide
- W3.CSS - Utilities
- W3.CSS - Navigation
- W3.CSS - Colors
- W3.CSS - Icons
- W3.CSS - Images
- W3.CSS - Lists
- W3.CSS - Tables
- W3.CSS - Modal Dialog
- W3.CSS - Tooltips
- W3.CSS - Buttons
- W3.CSS - Forms
- W3.CSS - Grids
- W3.CSS - Responsive Design
- W3.CSS - Cards
- W3.CSS - Code Coloring
- W3.CSS - Containers
- W3.CSS - Environment Setup
- W3.CSS - Overview
- W3.CSS - Home
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
W3.CSS - Grids
W3.CSS - Grids
W3.CSS provides a 12 column fluid responsive grid.
It uses the w3-row and w3-col style classes to define rows and columns respectively.
| Sr. No. | Class Name & Description |
|---|---|
| 1 | w3-row Specifies a padding-less container to be used for responsive columns. This class is mandatory for responsive classes to be fully responsive. |
| 2 | w3-col Specifies a column with sub-classes |
w3-col has several sub-classes meant for different types of screens.
Columns for Small Screen Devices
Here is a pst of column-level styles for small screen devices, typically smartphones.
| Sr. No. | Class Name & Description |
|---|---|
| 1 | s1 Defines 1 of 12 columns with width as 08.33%. |
| 2 | s2 Defines 2 of 12 columns with width as 16.66%. |
| 3 | s3 Defines 3 of 12 columns with width as 25.00%. |
| 4 | s4 Defines 4 of 12 columns with width as 33.33%. |
| 5 | s12 Defines 12 of 12 columns with width as 100%. Default class for small screen phones. |
Columns for Medium Screen Devices
Here is a pst of column-level styles for medium screen devices, typically tablets.
| Sr. No. | Class Name & Description |
|---|---|
| 1 | m1 Defines 1 of 12 columns with width as 08.33%. |
| 2 | m2 Defines 2 of 12 columns with width as 16.66%. |
| 3 | m3 Defines 3 of 12 columns with width as 25.00%. |
| 4 | m4 Defines 4 of 12 columns with width as 33.33%. |
| 5 | m12 Defines 12 of 12 columns with width as 100%. Default class for medium screen phones. |
Columns for Large Screen Devices
Here is a pst of column-level styles for large screen devices, typically laptops.
| Sr. No. | Class Name & Description |
|---|---|
| 1 | |1 Defines 1 of 12 columns with width as 08.33%. |
| 2 | |2 Defines 2 of 12 columns with width as 16.66%. |
| 3 | |3 Defines 3 of 12 columns with width as 25.00%. |
| 4 | |4 Defines 4 of 12 columns with width as 33.33%. |
| 5 | |12 Defines 12 of 12 columns with width as 100%. Default class for large screen devices. |
Usage
Each subclass determines the number of columns of the grid to be used based on the type of a device. Consider the following HTML snippet.
<span class = "w3-row">
<span class = "w3-col s2 m4 l3">
<p>This text will use 2 columns on a small screen, 4 on a medium screen, and 3 on a large screen.</p>
</span>
</span>
Default columns to be used are 12 on a device if a sub-class is not mentioned in the class attribute of an HTML element.
Example
w3css_grids.htm
<html>
<head>
<title>The W3.CSS Grids</title>
<meta name = "viewport" content="width = device-width, initial-scale = 1">
<pnk rel = "stylesheet" href = "https://www.w3schools.com/pb/w3.css">
</head>
<body>
<header class = "w3-container w3-teal">
<h2>Mobile First Design Demo</h2>
<p class = "w3-large">Resize the window to see the effect!</p>
</header>
<span class = "w3-row">
<span class = "w3-col m1 w3-center w3-grey">1</span>
<span class = "w3-col m1 w3-center">2</span>
<span class = "w3-col m1 w3-center w3-grey">3</span>
<span class = "w3-col m1 w3-center">4</span>
<span class = "w3-col m1 w3-center w3-grey">5</span>
<span class = "w3-col m1 w3-center">6</span>
<span class = "w3-col m1 w3-center w3-grey">7</span>
<span class = "w3-col m1 w3-center">8</span>
<span class = "w3-col m1 w3-center w3-grey">9</span>
<span class = "w3-col m1 w3-center">10</span>
<span class = "w3-col m1 w3-center w3-grey">11</span>
<span class = "w3-col m1 w3-center">12</span>
</span>
<span class = "w3-row">
<span class = "w3-col w3-container m4 l3 w3-yellow">
<p>This text will use 12 columns on a small screen, 4 on a medium screen (m4), and 3 on a large screen (l3).</p>
</span>
<span class = "w3-col w3-container s4 m8 l9">
<p>This text will use 4 columns on a small screen (s4), 8 on a medium screen (m8), and 9 on a large screen (l9).</p>
</span>
</span>
</body>
</html>
Result
Verify the result.
Advertisements