ADVERTISEMENT
Google AdSense Slot (headerLeaderboard)
Set your Publisher ID in src/config/ads.ts to display live ads.
W3.CSS Tutorial• 6 min read
The 12-Column Responsive Grid System
w3-row, w3-col, and device breakpoints: s (mobile), m (tablet), l (desktop)
W3.CSS incorporates a 12-column responsive grid system based on screen width breakpoints: Small (s <= 600px), Medium (m 601-992px), and Large (l > 992px).
Fluid Columns and Proportions
w3-row: Acts as the parent container row wrapping columns.
w3-col s12 m6 l4: Spans all 12 columns (100%) on mobile, 6 columns (50%) on tablets, and 4 columns (33.33%) on desktop monitors.
Convenience classes: w3-half (50%), w3-third (33.3%), w3-twothirds (66.6%), and w3-quarter (25%).
Responsive 3-Column Product Grid
<div class="w3-row-padding">
<div class="w3-col s12 m6 l4">
<div class="w3-card w3-container w3-light-grey">
<h4>Course 1: HTML5</h4>
<p>Master modern web semantics.</p>
</div>
</div>
<div class="w3-col s12 m6 l4">
<div class="w3-card w3-container w3-light-grey">
<h4>Course 2: CSS3</h4>
<p>Design responsive web layouts.</p>
</div>
</div>
<div class="w3-col s12 m12 l4">
<div class="w3-card w3-container w3-light-grey">
<h4>Course 3: JavaScript</h4>
<p>Build dynamic client-side applications.</p>
</div>
</div>
</div>w3-row-padding adds automatic gutters between nested columns.
ADVERTISEMENT
Google AdSense Slot (inContentBanner)
Set your Publisher ID in src/config/ads.ts to display live ads.
Test Yourself With Exercise
Which W3.CSS column class configures an element to span half width (6 of 12 columns) on tablet screens?