A grid is an invisible framework of lines that guides the placement of every element on a page. Grids bring order, consistency, and rhythm to layouts. They are not a creative limitation — they are the structural backbone that makes creative decisions easier and more coherent.
Why Use a Grid
Without a grid, designers place elements by feel. This works for single pages, but it breaks down across multi-page websites, apps, and design systems where dozens of layouts need to feel unified. A grid ensures that:
- Elements align consistently across different pages and sections
- Spacing is predictable and harmonious
- Responsive design is easier to implement because the grid adapts across breakpoints
- Collaboration improves because every designer on the team works within the same structure
Types of Grids
Column Grids
A column grid divides the page into vertical columns separated by gutters (the gaps between columns). Content blocks span one or more columns. The most common column grid on the web is the 12-column grid, popular because 12 is divisible by 2, 3, 4, and 6, giving maximum layout flexibility.
In a 12-column grid:
- A full-width element spans all 12 columns
- A two-column layout uses 6 + 6 columns
- A three-column layout uses 4 + 4 + 4 columns
- A sidebar layout might use 3 + 9 or 4 + 8 columns
- Asymmetric layouts like 5 + 7 create visual interest
CSS frameworks like Bootstrap popularized the 12-column grid, but you can implement the same concept with CSS Grid or Flexbox. In design tools like Figma, you can overlay a column grid on any frame to guide your placement.
Modular Grids
A modular grid adds horizontal divisions to the column grid, creating a matrix of rectangular modules. Each module is a consistent unit that can contain a single element or group of elements. Modular grids are especially useful for:
- Image galleries and portfolios
- Dashboard layouts with data cards
- Magazine-style layouts with varied content blocks
The intersection of rows and columns creates anchor points that give you precise control over both horizontal and vertical placement.
Baseline Grids
A baseline grid is a series of evenly spaced horizontal lines that text sits on — like the lines on ruled paper. Baseline grids ensure that text across multiple columns aligns horizontally, creating a clean, professional appearance.
In web design, achieving a perfect baseline grid is difficult due to varying line heights and element sizes. However, the principle is still valuable: choose a base unit (like 4px or 8px) and ensure that all spacing values — margins, padding, line-height — are multiples of that unit. This creates a consistent vertical rhythm even without a strict baseline grid.
The 12-Column Grid in Practice
Here is a practical approach to setting up a 12-column grid in a design tool:
- Define the canvas width. For desktop, a common content width is 1200px or 1440px.
- Set the number of columns to 12.
- Set the gutter width. Common values are 16px, 20px, or 24px.
- Set the margins. The space on either side of the grid. For a 1200px content width on a 1440px canvas, you would have 120px margins.
- Snap elements to column edges. Every content block, image, and text area should start and end on a column boundary.
Breaking the Grid
Grids are guidelines, not prisons. Intentionally breaking the grid — letting an image bleed past a column edge or overlap into the gutter — can create visual interest and emphasis. The key word is "intentionally." Breaking the grid works because the grid establishes an expectation, and the break creates a surprise. Without the grid, there is no expectation to break and no surprise to create.
Practical Tips
- Start every project by setting up a grid before placing any content. It takes two minutes and saves hours of alignment adjustments later.
- Use an 8px base unit for all spacing. This aligns well with most screen densities and creates consistent rhythm.
- Do not fight the grid. If content does not fit neatly, adjust the content or the column span — not the grid itself.
- Show the grid to developers. Sharing the grid specifications ensures the coded layout matches the design.
Grids are one of the few design tools that are purely beneficial. They cost nothing, constrain nothing worth keeping, and improve every layout they touch.