THE WORLD'S LARGEST WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

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 »