Layout & grid
A centered container and a 12-column grid give every Convert page the same underlying structure.
Container
Content centers inside a --max-width of 1200px via the .container class, with --section-px gutters of 24px holding it off the viewport edge on every breakpoint.
.container {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 var(--section-px);
}Grid
Convert's canonical bento grid is 12-column. Columns are the unit of measure for every block on a page.
1
2
3
4
5
6
7
8
9
10
11
12
Blocks span ranges of columns. A common split places one half from column 1 to 7 and the other from column 7 to 13.
span 1-7
span 7-13
20-column grids appear on some legacy LPs; 12-column is canonical going forward.
Prose widths
Centered text columns are capped at one of three prose-width tokens so line length stays readable.