Build clean layout grids instantly.

The grid: invisible, and still everywhere

You do not see a good grid.
You feel it. Things line up. The page is calm. The eye knows where to go.

A grid is not a cage. It is a set of agreements. Once they are made, you can stop deciding the same things again and again.

✦ The parts of a grid

• Columns. The vertical spaces where content goes.
• Gutters. The gaps between columns. They give content room to breathe.
• Margins. The space around the whole layout.
• Rows and baseline. The horizontal rhythm, often linked to the line height of your text.

✦ Why twelve columns?

Twelve can be divided by 2, 3, 4 and 6.
That gives you halves, thirds, quarters and sixths in one system.

For a simple site, four or six columns can be enough. For print, many designers start from the page and the text column, not from a fixed number.

✦ How to use this calculator

1. Set the container width with the slider.
2. Choose the number of columns and the gap between them.
3. Read the exact column width.
4. Copy the CSS grid settings or use the numbers in your design software.
5. Test with real content: a long headline, an image, a short caption.

✦ A little history

The modern grid grew in Swiss design of the 1950s and 60s. Designers like Josef Müller-Brockmann wrote it down as a method in Grid Systems in Graphic Design (1981).

The idea was simple and radical. Order is not boring. Order makes freedom possible.
It still works. Every web framework is built on it.

✦ Breaking the grid

Sometimes one element steps outside the grid. A large image. A quote.
That only works if everything else follows the grid. The exception needs a rule to be an exception.

✦ Common mistakes

• Gutters that are too small. Content starts to touch.
• A different grid on every page.
• Using the grid for boxes, but not for text.
• Forgetting mobile. Twelve columns become one. Plan that from the start.

✦ In practice

A portfolio website. Twelve columns on desktop. Project images span six columns each, two per row. Text spans eight, so lines do not get too long.
On a phone everything becomes one column. The order stays the same.

A magazine spread. Two pages, each with three columns. A large photo takes two columns and bleeds off the edge. The text flows through the rest.
Captions sit in one narrow column. The grid holds it all together.

A dashboard. A twelve-column grid with small gutters. Cards span three, four or six columns. Everything aligns, even when the content changes daily.
Order makes numbers easier to read.

✦ Four questions before you set it up

1. What do you want to say? Calm and structured, or dynamic? Fewer columns feel calmer.
2. What must be seen first? That element may take the most columns.
3. What can go? Extra boxes and lines. A good grid needs no visible borders.
4. What is the next small step? Place one real page in the grid. Adjust. Then do the rest.

✦ A small checklist

• Column, gutter and margin sizes are written down.
• Body text never spans the full width on large screens.
• Images and text start on the same column lines.
• There is a plan for tablet and phone.
• Spacing between sections follows a fixed step, not guesswork.

✦ From the classroom

We give students a newspaper page and a marker. Draw the grid you see.
After ten minutes everyone sees it. After that, they never stop seeing it.