W3.CSS Rows

Simple Responsive Rows

W3.CSS provides simple classes for dividing a row into halves, thirds, and quarters.

The columns automatically stack on small screens.

Row Classes

Class	Description
`w3-row`	Creates a row with no column padding
`w3-row-padding`	Creates a row with padding between the columns

Column Classes

Class	Width
`w3-half`	1/2
`w3-third`	1/3
`w3-twothird`	2/3
`w3-quarter`	1/4
`w3-threequarter`	3/4
`w3-rest`	Uses the remaining width

Mobile First Responsiveness

On screens smaller than 601 pixels, the fraction classes become full width.

Two Equal Columns

The w3-half class divides a row into two equal columns.

The width of the class is 1/2 of the parent element (50%).

On screens smaller than 601 pixels, it resizes to 100%.

w3-half

Example

Try it Yourself »

Three Equal Columns

The w3-third class divides a row into three equal columns.

The width of the w3-third class is 1/3 of the parent element (33.33%).

On screens smaller than 601 pixels, it resizes to 100%.

w3-third

Example

<div class="w3-row">
<div class="w3-third w3-container w3-blue">w3-third</div>
<div class="w3-third w3-container w3-light-blue">w3-third</div>
<div class="w3-third w3-container w3-blue">w3-third</div>
</div>

Try it Yourself »

Two Thirds and One Third

Fraction classes can be combined in the same row.

On screens smaller than 601 pixels they all resize to 100%.

2/3

1/3

Example

Try it Yourself »

Four Equal Columns

The w3-quarter class divides a row into four equal columns.

1/4

Example

Try it Yourself »

Rows with Padding

The w3-row-padding class adds space between the columns.

Example

Try it Yourself »

Without Padding:

Use w3-row when you want the columns to touch.

Use w3-row-padding when you want space between the columns.

Stretched Padded Rows

The w3-stretch class removes the outer margins from a padded row.

Example

Try it Yourself »

Using the Remaining Width

The w3-rest class uses the width left after the other columns.

150px

Remaining width

Example

<div class="w3-row">
<div class="w3-col" style="width:150px">150px</div>
<div class="w3-rest">Remaining width</div>
</div>

Try it Yourself »

Flexbox can also create this type of layout with flex:1.

Nested Rows

A row can be placed inside a column.

1/2

Example

Try it Yourself »

Rows vs Flexbox vs Grid

W3.CSS provides several ways to create layouts.

Layout	Best For
Rows	Simple halves, thirds, and quarters
Flexbox	Arranging and aligning items in one direction
Grid	Flexible layouts with rows and columns

Rows are useful when you want a simple predefined fraction without writing additional CSS.

Flexbox and Grid provide more control for modern layouts.

What You Have Learned

w3-row creates a row without column padding
w3-row-padding adds space between columns
w3-half creates half-width columns
w3-third and w3-twothird create third-based columns
w3-quarter and w3-threequarter create quarter-based columns
w3-rest uses the remaining width
Fraction columns automatically stack on small screens

More Examples

Explore more ways to use W3.CSS rows.

Combinations