W3.CSSLesson 18Free preview

W3.CSS 12-Columns

This lesson is part of W3.CSS · All levels

Summary

The 12-column system divides the width of the row into twelve equal-sized sections so that any combination of layouts is easy to arrange. In W3.CSS you write w3-col with a fractional number like s6 or l4, and the column will divide the space according to that number. Since 12 is divisible by 2, 3, 4, 6, and 12, the system is flexible for many needs.

Key points

The line is divided into 12 columns of equal width
The number in the class determines how many columns are used, for example 6 means half.
The prefixes s, m, and l set behavior per screen size
W3-half, w3-third, and w3-quarter are common shortcuts.
Always count the columns in a row to 12 so there's no odd gap

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.