W3.CSS Responsive Fluid Grid

Responsive Web Design

Responsive web design makes your web page look good on all devices.

Responsive web design uses only HTML and CSS.

Best Experience For All Users

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.

Desktop

Tablet

Phone

It is called responsive web design when you use CSS and HTML to resize, hide, shrink, enlarge, or move the content to make it look good on any screen.

W3.CSS Responsive Classes

The w3-content Class

The w3-content class defines a container for centered content. Use the CSS max-width property to override the default width (980px).

Responsive Show / Hide

The w3-hide-small, w3-hide-medium, and w3-hide-large classes hide elements on specific screen sizes.

Note: Resize the browser window to understand how it works:

The w3-mobile Class

The w3-mobile class adds mobile-first responsiveness to any element.

It adds display:block and width:100% to an element on screens that are less than 600px wide.

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. 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 might be better if the content were stacked on top of each other.

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 and desktops):

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% (l10, l2) 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.