Skip to content
Visual Gallery

12-column grid

The page is divided into 12 columns, and every element spans a whole number of them.

Visual traits

  • The content area is divided into 12 equal columns with fixed gutters between them
  • Every element starts and ends on a column edge
  • Common spans are 12, 7 + 5 and 4 + 4 + 4 columns

For AI

MarkdownJSON

Prompt

12-column grid layout: divide the content area into 12 equal columns with fixed gutters, and make every element start and end on a column edge, using spans such as 12, 7 + 5 and 4 + 4 + 4.

Negative prompt

freeform placement, elements ignoring columns, inconsistent gutters