How does the W3.CSS 12-column grid system work?

Each row is divided into 12 columns, and you give every element classes (like s12 m6 l4) saying how many columns it spans at the small, medium, and large breakpoints.

Grid classes:

• s1 to s12 - Small screens
• m1 to m12 - Medium screens
• l1 to l12 - Large screens

Example - 3 equal columns on large, stacked on small:

<div class="w3-row">
    <div class="w3-col s12 m6 l4">Box 1</div>
    <div class="w3-col s12 m6 l4">Box 2</div>
    <div class="w3-col s12 m12 l4">Box 3</div>
</div>

Behavior:

• Large: 3 columns side by side (4+4+4 = 12)
• Medium: 2 columns, then 1 full-width (6+6, then 12)
• Small: All stacked vertically (each is 12)

Tip: If no class is specified for a size, it inherits from the next smaller size, or defaults to 12.