Grid System
Definition
A framework of columns and rows used to create consistent, organised layouts across a website.
What is a Grid System?
A grid system is an invisible framework of columns and rows that designers use to organise content on a page. Like graph paper for web design, it ensures elements align properly and spacing stays consistent.
Grids bring order to layouts. Without them, elements float randomly, margins vary, and designs feel chaotic.
How Grid Systems Work
Columns
Most web grids use 12 columns because 12 divides easily (by 2, 3, 4, and 6). Content blocks span one or more columns.
Gutters
The gaps between columns. Consistent gutters create breathing room without manually spacing every element.
Margins
The space between the grid and the edge of the screen. Often larger on desktop and smaller on mobile.
Common Grid Patterns
| Layout | Columns Used |
|---|---|
| Full width | 12 columns |
| Two equal columns | 6 + 6 columns |
| Sidebar layout | 3 + 9 columns |
| Three columns | 4 + 4 + 4 columns |
| Four columns | 3 + 3 + 3 + 3 columns |
Grid Benefits
- Consistency - Every page follows the same underlying structure
- Faster design - Decisions about alignment are already made
- Responsive flexibility - Columns can restack on mobile
- Visual rhythm - Regular spacing creates a professional feel
In Practice
Most modern websites use CSS Grid or Flexbox to implement grid systems. Frameworks like Bootstrap include pre-built 12-column grids. Even if you don't use a framework, understanding grid principles helps create better layouts.