In Web & Mobile Design
What is a Grid System?
A grid system is a column-based layout structure with gutters and margins used to create alignment, rhythm, and visual hierarchy across breakpoints.
When to use a Grid System?
- When you need consistent layouts across multiple breakpoints
- When typography, imagery, and components must align for readability
- When design systems require repeatable, scalable templatesWhen not to use a Grid System?
- When you intentionally pursue freeform or experimental compositions
- When the content is minimal and a simple centered layout sufficesWhat is the anatomy of a Grid System?
- Column count and column widths
- Gutters and outer margins
- Containers and max widths
- Relationship to the baseline grid and typographic scale