Free 12 Column Grid Generator

Twelve has divisors 1, 2, 3, 4, 6 and 12. In layout terms that means a twelve column grid natively expresses a half, a third, a quarter and a sixth of the available width, and every one of those divisions lands exactly on a column boundary.

The convention reached the web through CSS frameworks. The 960 Grid System, released in 2008, offered 12 and 16 column variants on a 960 pixel container — 960 being chosen because it divides cleanly and fitted the 1024 pixel screens of the time with room for browser chrome.

Bootstrap adopted a twelve column grid and, through sheer ubiquity, made it the default assumption. Foundation used twelve. Later systems built on CSS Grid and Flexbox kept it, even though the underlying technology no longer requires a fixed column count at all.

The print tradition is older and less rigid. Josef Müller-Brockmann's Grid Systems in Graphic Design (1981) works through grids of two, three, four, five, six and eight fields, chosen per project rather than standardised — a reminder that twelve is a web convention rather than a law of layout.

A gutter is the space between columns. The common error is treating it as part of the column — dividing the width by twelve and putting the gap inside each slice — which makes the gutter grow and shrink with the viewport.

Correct behaviour is the opposite. The gutter is an absolute measure that stays constant while columns absorb the change. At 1440 pixels wide with a 24 pixel gutter, the columns are wide and the gaps are 24 pixels; at 768 pixels the columns are narrow and the gaps are still 24 pixels.

This is why the tool sets gutter and column independently. A grid where the gutter is a percentage looks correct at the width it was designed at and wrong everywhere else, and the failure is subtle enough that it usually ships.

The outer margin is the space between the layout and the edge of the viewport. It does a different job from the gutter: the gutter separates elements from each other, the margin separates the whole composition from the world.

They are frequently set to the same value out of habit, and there is no reason they should be. A wide margin with tight gutters reads as a dense block of content held away from the edges; equal values read as an even field. Both are legitimate; conflating them removes the choice.

The discipline of a column grid is that elements span whole numbers of columns. Four columns is a third, three is a quarter, six is a half, eight is two thirds.

An element that stops between column boundaries breaks the system, and it is visible even to a viewer who has never heard of a layout grid — what they see is that the edges of things do not line up down the page. Alignment down the page is most of what a grid buys.

The exception worth knowing is that images and full-bleed elements often deliberately break out of the grid. That works precisely because everything else obeys it: a deliberate exception reads as emphasis, while general inconsistency reads as carelessness.

On narrow screens, twelve columns of a 375 pixel viewport are about 24 pixels each before gutters, which is narrower than a word. Almost every responsive system collapses to four or six columns below a breakpoint, and elements re-span accordingly — three cards across becomes one card stacked.

The other limit is editorial layout with genuinely irregular proportions. The column layout generator takes any count from 2 to 16, and the modular grid tool adds rows. A magazine page built on a five column asymmetric grid cannot be expressed in twelve, and forcing it produces columns that are nearly right and never quite. That is what the manuscript and modular grids are for.

The 960 Grid System fixed the container at 960 pixels because screens were 1024 wide and the arithmetic divided cleanly. That constraint disappeared with responsive design: containers now have a maximum width and shrink below it, so the column width is derived rather than declared.

What replaced the fixed container is a maximum measure. A text column wider than roughly 75 characters becomes hard to read regardless of how much screen is available, so most systems cap the container somewhere between 1140 and 1440 pixels and let the margins absorb everything beyond it. The twelve columns then divide whatever the container currently is.

This is why setting the margin before the columns matters in practice as well as in principle. On a capped container the margin is doing two jobs at once — framing the layout and absorbing the excess width — and changing it changes every column behind it.

CSS Grid made the twelve column convention technically unnecessary: it defines whatever tracks a layout needs, including named areas and asymmetric spans, without a column framework at all.

It persists anyway, for a human reason rather than a technical one. Twelve columns is a shared vocabulary: a designer can hand a developer "eight and four" and be understood without a specification. Systems survive on communication as much as on capability. The 12-column web overlay page covers why the number stuck, beside the rest of the page template overlays.