W3.CSS Rows

Welcome to The Coding College! 🎓 In this post, we’re going to break down how to use W3.CSS Rows to create clean, responsive web layouts effortlessly. Whether you’re new to W3.CSS or looking to refine your layout skills, this guide is tailored to provide real value.

What is a Row in W3.CSS?

In W3.CSS, a row is used to structure content horizontally across the page, often alongside columns (w3-col). It works similarly to the row in Bootstrap or other CSS frameworks but with a simplified syntax.

Think of rows as containers for columns — they help align your content properly and responsively.

Basic Row Example

<div class="w3-row">
  <div class="w3-col s6 w3-blue w3-padding">Left Column</div>
  <div class="w3-col s6 w3-green w3-padding">Right Column</div>
</div>

What’s Happening?

• w3-row defines a flex-based row container.
• w3-col s6 creates a column that takes up 6/12 (50%) of the width on small screens and larger.

Fully Responsive Layout

W3.CSS uses a 12-column grid system. You can specify how much space a column should take by using:

• s = small (phones)
• m = medium (tablets)
• l = large (desktops)

<div class="w3-row">
  <div class="w3-col s12 m6 l4 w3-red w3-padding">Column 1</div>
  <div class="w3-col s12 m6 l8 w3-blue w3-padding">Column 2</div>
</div>

This means:

• On small screens: each column takes full width
• On medium screens: 50% / 50%
• On large screens: 33% / 66%

Using Rows for Layout Design

Three Equal Columns

<div class="w3-row">
  <div class="w3-col s4 w3-teal w3-padding">Column 1</div>
  <div class="w3-col s4 w3-orange w3-padding">Column 2</div>
  <div class="w3-col s4 w3-purple w3-padding">Column 3</div>
</div>

Mixed-Width Layout

<div class="w3-row">
  <div class="w3-col s3 w3-pale-red w3-padding">25%</div>
  <div class="w3-col s9 w3-pale-green w3-padding">75%</div>
</div>

Adding Gaps Between Columns

To add space between columns, use w3-row-padding instead of w3-row.

<div class="w3-row-padding">
  <div class="w3-third w3-light-grey w3-padding">Box 1</div>
  <div class="w3-third w3-light-grey w3-padding">Box 2</div>
  <div class="w3-third w3-light-grey w3-padding">Box 3</div>
</div>

This adds 8px padding between columns, giving a more polished appearance.

Expert Tips

• Use w3-container inside or outside rows for better spacing and structure.
• Combine rows with w3-card, w3-border, and w3-shadow for professional designs.
• Wrap rows in a w3-content or w3-main container to control max width on large screens.

More Layout Power at Your Fingertips

Ready to Build with Rows?

Rows are the foundation of any page structure. With W3.CSS, they’re super intuitive to use, and they pair perfectly with other utility classes for:

• Layouts
• Navigation bars
• Cards
• Sidebars
• Footers

Need Help?

Got a layout in mind but unsure how to structure it with rows and columns? Drop a message anytime — I’m here to help you code smarter and cleaner.