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.
Mobile First
Historically, web designers have developed web applications for computers first, and then added responsive web design to make sure the web looks good when viewed on a tablet or a phone.
This trend is shifting towards designing for mobiles first, and then add responsive design to make a site work on desktops and laptops.
50/50 is an easy way to achieve web design for responsive webs. With 50/50 design, the screen can show two pages on large screens and one page on narrow screens.
My Work
Some of my latest projects.
Just call me awesome.
About Me
Lorem ipusm sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.
Swing By
..for a cup of coffee, or whatever.
Chicago, US
+00 1515151515
test@test
Contact
GET IN TOUCH
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.
