Two column document layout

The page is a twelve column grid

Every page's content area is twelve columns wide. A row holds one or more cells placed left to right, and each cell declares a span between one and twelve. Full width is a single cell of twelve. Side by side is six and six. A label beside a value is four and eight. The spans in a row should add up to twelve or less, and rows stack top to bottom in reading order, which is the order you wrote them in.

What goes in a cell

A cell holds ordinary blocks: a heading, paragraphs, a list, a table, a callout, a chart. It can also hold another container, so a six column cell can itself be split. The nesting is what makes a price panel beside a scope section possible without any absolute positioning, and it is also the thing to use sparingly, because two levels of nesting on an A4 page leaves each cell narrow enough to hurt the prose.

At a page break, a row moves whole

The engine flows rows onto physical pages and it will not split a pair of side by side cells down the middle. A row that does not fit in the space left moves to the next page entirely. That is the behaviour you want, and it is also the reason paired panels suit short parallel content: two long columns will push the whole row over and leave a hole above it. If the two halves each run to paragraphs, they read better one after the other at full width.

The AI chat can edit inside a cell

The chat has an operation for exactly this: rewriting one cell of a container. That matters more than it sounds, because clicking into the right half of a dense row is fiddly and naming it in a sentence is not. What the chat cannot do is change the structure: it will not add a cell, change a span or turn one column into two. Those are builder decisions.

When a table is the better choice

If the two columns are really rows of paired values, use a table. A two column layout is for two pieces of content that happen to sit beside each other; a table is for a set of records with the same shape. The giveaway is repetition: one label and value pair is a row of cells, ten of them is a table, and building ten side by side rows by hand is a page you will not want to edit later.

How it works, in three steps

1. Step 1

   Add a row

   Place a container where the side by side content should sit, in the reading order you want it.

2. Step 2

   Set the spans

   Six and six for equal halves, four and eight for a label beside a body. They should total twelve or less.

3. Step 3

   Fill each cell with normal blocks

   A heading and a paragraph on one side, a callout or a small table on the other. Keep both halves short.

4. Step 4

   Read it at the page break

   If the row jumps to the next page and leaves a hole, the halves are too long and want to be full width sections instead.

The full walkthrough with screenshots is in the guide Style text and add callouts, stats and lists.

Limits worth knowing

• Spans run 1 to 12 and should total 12 or less in a row.
• A row is never split across a page break; it moves whole.
• Containers can nest, but each level narrows the usable width sharply.
• The AI chat can rewrite a cell's text but cannot add, remove or resize cells.
• There is no page level column setting; columns exist only inside a row.

Questions people ask

Related pages