W3.CSS 12-Column Layout
The 12-Column System
W3.CSS can divide a web page into 12 columns.
W3.CSS 12-Column Classes
| Class | Description |
|---|---|
| w3-row | Container for responsive columns |
| w3-row-padding | Container for responsive columns with padding |
| w3-col | Responsive column |
| l1 - l12 | Responsive column sizes for large screens |
| m1 - m12 | Responsive column sizes for medium screens |
| s1 - s12 | Responsive column sizes for small screens |
Web pages can be viewed using many different devices: desktops, tablets, and phones. Your web page should look good, and be easy to use, regardless of the device size.
W3.CSS includes classes for creating responsive layouts for small, medium, and large screens.
Small, Medium, and Large Screens
W3.CSS has three groups of responsive column classes:
| Class | Device | Screen Width |
|---|---|---|
s1 - s12 |
Small | Less than 601px |
m1 - m12 |
Medium | 601px to 992px |
l1 - l12 |
Large | 993px and wider |
You can use different combinations of columns for small, medium, and large screens.
The w3-col Class
The column classes are used together with w3-col:
s4
s8
4 columns
8 columns
Example
<div class="w3-row">
<div class="w3-col s4">4 columns</div>
<div class="w3-col s8">8 columns</div>
</div>
Try it Yourself »
Note
The numbers (s4 and s8) after
w3-col tell how many of the 12 columns the element should use.
Responsive Columns
You can combine small, medium, and large classes on the same element.
Example
<div class="w3-col s12 m6 l4">
Content
</div>
The example above means:
| Screen | Class | Columns | Width |
|---|---|---|---|
| Small | s12 |
12 | 100% |
| Medium | m6 |
6 | 50% |
| Large | l4 |
4 | 33.33% |
Responsive columns make it easy to create layouts that change with the screen size.
A Responsive Three-Column Layout
The following example displays one column on small screens, two columns on medium screens, and three columns on large screens.
London
Capital of England.
Paris
Capital of France.
Tokyo
Capital of Japan.
Example
<div class="w3-row-padding">
<div class="w3-col s12 m6 l4">
<div class="w3-card w3-container">London</div>
</div>
<div class="w3-col s12 m6 l4">
<div class="w3-card w3-container">Paris</div>
</div>
<div class="w3-col s12 m6 l4">
<div class="w3-card w3-container">Tokyo</div>
</div>
</div>
Try it Yourself »
Using Only Medium Classes
You do not have to specify all three screen sizes.
If you use only medium classes, the columns stack on small screens and keep their defined widths on medium and large screens.
m4
m8
Example
<div class="w3-row">
<div class="w3-col m4">m4</div>
<div class="w3-col m8">m8</div>
</div>
Try it Yourself »
The responsive grid is mobile-first.
Without a small-screen class, columns use the full width on small screens.
What You Have Learned
- W3.CSS uses a 12-column responsive grid system
s1tos12define widths on small screensm1tom12define widths on medium screensl1tol12define widths on large screens- Different screen-size classes can be combined on the same element
Note
The W3.CSS 12-column layout system has been part of W3.CSS since earlier versions and is kept for compatibility with existing websites.
For new layouts, W3.CSS also supports modern CSS Flexbox and Grid.
More Examples
Explore more responsive W3.CSS layouts.
25% / 75% Layout
m3
m9
Example
<div class="w3-row">
<div class="w3-col m3">m3</div>
<div class="w3-col m9">m9</div>
</div>
Try it Yourself »
33% / 67% Layout
m4
m8
Example
<div class="w3-row">
<div class="w3-col m4">m4</div>
<div class="w3-col m8">m8</div>
</div>
Try it Yourself »
Responsive Sidebar
A sidebar can use different widths on medium and large screens.
Example
<div class="w3-row">
<aside class="w3-container w3-col m4 l3">
<h3>Sidebar</h3>
</aside>
<main class="w3-container w3-col m8 l9">
<h3>Main content</h3>
</main>
</div>
Try it Yourself »
Using w3-rest
The w3-rest class is a powerful and flexible class that will use what's left of the grid column.
150px
rest
75px
rest
100px
100px
rest
quarter
80px
rest
quarter
quarter
quarter
35%
rest
Example using rest
<div class="w3-row">
<div class="w3-col" style="width:150px"><p>150px</p></div>
<div class="w3-rest"><p>rest</p></div>
</div>
Try It Yourself »
The element using class="w3-rest" must always be the last element in the source code.
Using Percent
Use the CSS width property to determine a specific width of the columns.
20%
60%
20%
45%
55%
15%
35%
10%
30%
10%
Example
<div class="w3-row">
<div class="w3-col
w3-container w3-green"
style="width:20%"><p>20%</p></div>
<div
class="w3-col w3-container w3-blue" style="width:60%"><p>60%</p></div>
<div
class="w3-col w3-container w3-red" style="width:20%"><p>20%</p></div>
</div>
Try It Yourself »
