Guided Notes

W3.CSS: Responsive Layout

The 12-column grid, rows and columns, halves, thirds, and quarters, cells, flex and grid classes, and hiding by screen size.

The 12-column grid

Slide 1 / 5

W3.CSS divides a row into 12 equal columns. A w3-row holds w3-col elements whose size classes say how many columns they span on each screen size:

β€’ s1–s12 β€” small screens (phones, up to 600px) β€’ m1–m12 β€” medium screens (tablets, 601–992px) β€’ l1–l12 β€” large screens (laptops, 993px and up)

<div class="w3-col s12 m6 l4"> is full width on phones, half on tablets, and a third on large screens.

← W3.CSS: Colors, Text & Themes