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.
1/2
1/2
1/3
1/3
1/3
1/3
2/3
1/4
1/4
1/4
1/4
1/2
1/4
1/4
2/3
1/3
3/4
1/4
1/4
1/4
1/2
1/4
1/2
1/4
Row Classes
A W3.CSS row is a responsive, mobile-first grid system to handle simple layout.
A row consists of a parent element with one or more row columns.
Rows are responsive, columns will re-arrange automatically depending on screen size.
| Class | Description |
|---|---|
w3-row |
Creates a row with no column padding |
w3-row-padding |
Creates a row with padding between the columns |
Responsive Classes
| Class | Normal Width | Small Screen |
|---|---|---|
w3-half |
1/2 of parent element (50%) | 100% |
w3-third |
1/3 of parent element (33.33%) | 100% |
w3-twothird |
2/3 of parent element (66.66%) | 100% |
w3-quarter |
1/4 of parent element (25%) | 100% |
w3-threequarter |
3/4 of parent element (75%) | 100% |
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
w3-half
Example
<div class="w3-row">
<div class="w3-half w3-container w3-blue">w3-half</div>
<div class="w3-half w3-container w3-light-blue">w3-half</div>
</div>
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
w3-third
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
<div class="w3-row">
<div class="w3-twothird w3-container w3-blue">2/3</div>
<div class="w3-third w3-container w3-light-blue">1/3</div>
</div>
Try it Yourself »
Four Equal Columns
The w3-quarter class divides a row into four equal columns.
1/4
1/4
1/4
1/4
Example
<div class="w3-row w3-center">
<div class="w3-quarter">1/4</div>
<div class="w3-quarter">1/4</div>
<div class="w3-quarter">1/4</div>
<div class="w3-quarter">1/4</div>
</div>
Try it Yourself »
Nice Combinations
w3-quarter
w3-half
w3-quarter
w3-quarter
w3-quarter
w3-half
w3-half
w3-quarter
w3-quarter
Rows with Padding
The w3-row-padding class adds space between the columns.
Example
<div class="w3-row-padding">
<div class="w3-third"><img src="img_lights.jpg"></div>
<div class="w3-third"><img src="img_nature.jpg"></div>
<div class="w3-third"><img src="img_snowtops.jpg"></div>
</div>
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
<div class="w3-row-padding w3-stretch">
<div class="w3-third">...</div>
<div class="w3-third">...</div>
<div class="w3-third">...</div>
</div>
Try it Yourself »
Nested Rows
A row can be placed inside a column.
1/2
1/2
1/2
1/2
1/2
1/2
Example
<div class="w3-row">
<div class="w3-half w3-light-grey">
<h3>1/2</h3>
<div class="w3-row">
<div class="w3-half w3-blue">1/2</div>
<div class="w3-half w3-light-blue">1/2</div>
</div>
</div>
<div class="w3-half w3-light-grey">
<h3>1/2</h3>
<div class="w3-row">
<div class="w3-half w3-blue">1/2</div>
<div class="w3-half w3-light-blue">1/2</div>
</div>
</div>
</div>
Try it Yourself »
Column Classes
| Class | Width |
|---|---|
w3-col |
Difines a column in a row |
w3-rest |
Uses the remaining width |
The w3-col Class
The w3-col class can be used to divide a row into:
- Percent
- Pixels
- The Rest
Using Percent
The w3-col class can be combined with CSS widths.
20%
60%
20%
Example
<div class="w3-row">
<div class="w3-col" style="width:20%">20%</div>
<div class="w3-col" style="width:60%">60%</div>
<div class="w3-col" style="width:20%">20%</div>
</div>
Try it Yourself »
20%
60%
20%
45%
55%
15%
35%
30%
20%
Example
<div class="w3-row">
<div class="w3-col
w3-blue" style="width:20%"><p>20%</p></div>
<div
class="w3-col w3-light-blue" style="width:60%"><p>60%</p></div>
<div
class="w3-col w3-blue" style="width:20%"><p>20%</p></div>
</div>
Try It Yourself »
Using Percent and the Rest
The w3-rest class uses the width left after the other columns.
25%
The Rest
Example
<div class="w3-row">
<div class="w3-col w3-blue" style="width:25%">25%</div>
<div class="w3-rest w3-light-blue">The Rest</div>
</div>
Try it Yourself »
Using Pixels and the Rest
The w3-rest class uses the width left after the other columns.
150px
The Rest
Example
<div class="w3-row">
<div class="w3-col w3-blue" style="width:150px">150px</div>
<div class="w3-rest w3-light-blue">The Rest</div>
</div>
Try it Yourself »
Flexbox can also create this type of layout with flex:1.
The w3-rest Class
The w3-rest class is a powerful and flexible class that will use what's left of the grid column.
150px
rest
75px
rest
100px
100px
rest
quarter
80px
rest
quarter
quarter
quarter
35%
rest
Example using rest
<div class="w3-row">
<div class="w3-col" style="width:150px"><p>150px</p></div>
<div class="w3-rest"><p>rest</p></div>
</div>
Try It Yourself »
The element using class="w3-rest" must always be the last element in the source code.
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-rowcreates a row without column paddingw3-row-paddingadds space between columnsw3-halfcreates half-width columnsw3-thirdandw3-twothirdcreate third-based columnsw3-quarterandw3-threequartercreate quarter-based columnsw3-restuses the remaining width- Fraction columns automatically stack on small screens
