A 12-column system offers flexible composition for responsive pages and editorial layouts.
12-col basics
- Container:
repeat(12, minmax(0,1fr)). - Components span selected columns per breakpoint.
- Use offsets sparingly; prefer semantic source order.
Production checklist
- Define span conventions for common components.
- Avoid unnecessary empty spacer columns.
- Validate tablet breakpoints, not just mobile/desktop extremes.
Important interview questions and answers
- Q: Why 12 columns historically?
A: Highly divisible grid for many layout ratios. - Q: Should every page use 12-col rigidly?
A: No, use when helpful; simple layouts can use fewer tracks. - Q: Main risk of rigid grid systems?
A: Forced layout complexity and unnecessary wrappers.
Tip: Use fr units and gap instead of margin hacks between tracks.