W3.CSS Responsive Fluid Grid

Responsive Grid

W3.CSS supports a 12 column responsive fluid grid.

Resize the page to see the effect!

Responsive Rows

W3.CSS's grid system is responsive, and the columns will re-arrange automatically depending on the screen size: On a big screen it might look better with the content organized in three columns, but on a small screen it would be better if the content items were stacked on top of each other.

Columns must reside inside a row to be fully responsive.

w3-col has the following sub classes:

Columns for small screens (typical smart phones):

Columns for medium screens (typical tablets):

Columns for large screens (typical laptops):

The classes above can be combined to create more dynamic and flexible layouts.

Each class scales up, so if you wish to set the same width for small, medium and large screens, you only need to specify the small class. And if you want the same width on medium and large screens, you only need to specify the medium class.

However, if you only use medium and/or large classes, the width will always transform to 100% on small screens.

Note: The number of columns should always add up to 12 for each row (6+6, 3+3+6, 9+3, etc)!

Two Equal Columns

Two equal-width columns (50%/50%) on all screen sizes:

Two Unequal Columns

Two columns of unequal width (25%/75%) on all screen sizes:

Three Equal Columns

Three equal-width columns (33.3%/33.3%/33.3%) on all screen sizes:

Three Unequal Columns

Three various-width columns (25%/50%/25%) on tablets, laptops and desktops. On mobile phones, the columns will automatically stack (100% width):

Note: This example is the same as using w3-quarter (m3), w3-half (m6), w3-quarter (m3), which you learned in the W3.CSS Responsive chapter.

Six Columns

Six equal-width columns (16% each) on tablets, laptops and desktops. On mobile phones, the columns will automatically stack (100% width):

Mixed: Mobile and Laptops

You can combine classes to create a dynamic and flexible layout. This example will produce a two column layout with a 83.34%/16.66% (l8, l4) split on large screens and a 50%/50% (s6, s6) split on small screens:

Mixed: Mobile, Tablets and Laptops

This example will produce a three column layout with a 25%/58.34%/16.66% (l3, l7, l2) split on large screens, 50%/25%/25% (m6, m3, m3) split on medium screens and a 33.3%/33.3%/33.3% (s4, s4, s4)split on small screens:

Difference between w3-row and w3-row-padding

The w3-row class defines a padded-less container, while the w3-row-padding class adds a 8px left and right padding to each column:

w3-row:

w3-row-padding:

Using w3-rest

The w3-rest class is a powerful and flexible class that will use what's left of the grid column.

Using Percent

Use the CSS width property to determine a specific width of the columns.