Member-only story

Stop Fighting CSS Layouts: Build Responsive Pages With 3 Classes

Er Raj Aryan

4 min read2 hours ago

Press enter or click to view image in full size

You don’t need Bootstrap, Grid, or a 40-line media query to make a two-column layout that works on mobile.

Be honest: how many times have you Googled “how to center a div” or “CSS columns not stacking on mobile”?

I used to burn an hour on layouts that should have taken five minutes. Then I tried W3.CSS , a tiny CSS framework with no JavaScript and no setup, and my layout headaches mostly disappeared.

Here’s the part that surprised me: the whole responsive grid is built on a few class names you can learn in the time it takes to drink your chai.

The Core Idea: A Row Is Just a Parent With Children

In W3.CSS, a row is a parent element with columns inside it. That’s it.

<div class="w3-row">

<div class="w3-half w3-container w3-blue">Left</div>

<div class="w3-half w3-container w3-light-blue">Right</div>

</div>

Two equal columns.…