W3.CSS Responsive Fluid Grid
Responsive Grid
W3.CSS supports a 12 column responsive fluid grid.
Resize the page to see the effect!
1
2
3
4
5
6
7
8
9
10
11
12
This part will occupy 12 columns on a small screen, 4 on a medium screen, and 3 on a large screen.
This part will occupy 12 columns on a small screen, 8 on a medium screen, and 9 on a large screen.
1
2
3
4
5
6
7
8
9
10
11
12
Example
<div class="w3-row">
<div class="w3-col m4 l3">
<p>
I will occupy 12 columns on a small screen, 4
on a medium screen, and 3 on a large screen.
</p>
</div>
<div class="w3-col m8 l9">
<p>
I will occupy 12 columns on a small screen, 8
on a medium screen, and 9 on a large screen.
</p>
</div>
</div>
Try It Yourself »
Responsive Rows
Columns must reside inside a row to be fully responsive.
| Class | Description |
|---|---|
| w3-row | Defines a padding-less container for responsive columns. |
| w3-row-padding | Defines a padded container for responsive classes. |
| w3-col | Defines a column with sub classes |
w3-col has the following sub classes:
Columns for small screens (typical smart phones):
| Class | Description |
|---|---|
| s1 | Defines 1 of 12 columns (width:08.33%) for small screens |
| s2 | Defines 2 of 12 columns (width:16.66%) for small screens |
| s3 | Defines 3 of 12 columns (width:25.00%) for small screens |
| s4 | Defines 4 of 12 columns (width:33.33%) for small screens |
| s5-s11 | |
| s12 | Defines 12 of 12 columns (width:100%). Default for small screens |
Columns for medium screens (typical tablets):
| Class | Description |
|---|---|
| m1 | Defines 1 of 12 columns (width:08.33%) for medium screens |
| m2 | Defines 2 of 12 columns (width:16.66%) for medium screens |
| m3 | Defines 3 of 12 columns (width:25.00%) for medium screens |
| m4 | Defines 4 of 12 columns (width:33.33%) for medium screens |
| m5-m11 | |
| m12 | Defines 12 of 12 columns (width:100%). Default for medium screens |
Columns for large screens (typical laptops):
| Class | Description |
|---|---|
| l1 | Defines 1 of 12 columns (width:08.33%) for large screens |
| l2 | Defines 2 of 12 columns (width:16.66%) for large screens |
| l3 | Defines 3 of 12 columns (width:25.00%) for large screens |
| l4 | Defines 4 of 12 columns (width:33.33%) for large screens |
| l5-l11 | |
| l12 | Defines 12 of 12 columns (width:100%). Default for large screens) |
Example
<div
class="w3-row">
<div class="w3-col m4"><p>m4</p></div>
<div
class="w3-col m4"><p>m4</p></div>
<div class="w3-col m4"><p>m4</p></div>
</div>
<div class="w3-row">
<div class="w3-col m3"><p>m3</p></div>
<div class="w3-col m3"><p>m3</p></div>
<div class="w3-col m3"><p>m3</p></div>
<div
class="w3-col m3"><p>m3</p></div>
</div>
Try It Yourself »
Example using containers
<div class="w3-container">
<div
class="w3-row">
<div class="w3-col w3-container m4"><p>m4</p></div>
<div
class="w3-col w3-container m4"><p>m4</p></div>
<div class="w3-col
w3-container m4"><p>m4</p></div>
</div>
<div class="w3-row">
<div class="w3-col
w3-container m3"><p>m3</p></div>
<div class="w3-col
w3-container m3"><p>m3</p></div>
<div class="w3-col
w3-container m3"><p>m3</p></div>
<div
class="w3-col w3-container m3"><p>m3</p></div>
</div>
</div>
Try It Yourself »
Example using percent
<div class="w3-row">
<div class="w3-col"
style="width:20%"><p>20%</p></div>
<div class="w3-col" style="width:60%"><p>60%</p></div>
<div
class="w3-col" style="width:20%"><p>20%</p></div>
</div>
Try It Yourself »
Example using rest
<div class="w3-row">
<div class="w3-col" style="width:75px"><p>75px</p></div>
<div class="w3-rest"><p>rest</p></div>
</div>
Try It Yourself »
