Level: Basic
The 12-column grid is one of the most common layout foundations in web design because 12 divides evenly into many useful configurations.
Twelve Columns Divide Flexibly
Twelve can be split evenly into halves, thirds, quarters, and sixths, giving designers a highly flexible set of layout options from one consistent structure.
Gutters and Margins Are Part of the System Too
The spacing between columns and around the grid's edges is as much a part of the system as the columns themselves, and needs to stay consistent.
The Grid Should Adapt, Not Just Scale, Across Screen Sizes
A responsive grid typically changes its column count or arrangement at different breakpoints, rather than simply shrinking a fixed 12-column layout uniformly.
Next step: Use the Screen Resolution Simulator to preview how your grid-based layout actually holds up across a range of different screen widths.