Layout Grid

Illustrate a composition grid with columns, margins, gutters, and supporting specifications.

<LayoutGrid
  columns={12}
  gutter="24px"
  margin="48px"
  ratio="16 / 9"
  label="Desktop composition"
  specs={[{ term: "Alignment", value: "Content follows the column grid" }]}
/>

Usage

Use LayoutGrid to document a layout specification. With no props, it draws a 12-column canvas at a 16 / 9 aspect ratio.

<LayoutGrid />

The default preview adds a label and specification row. This diagram describes a composition; to arrange actual page content, use Grid.

Examples

Start with the default grid

With no props, the diagram uses its default columns, gutter, margin, and canvas ratio, without a label or specification rows.

<LayoutGrid />

Annotate a desktop composition

Supply a label, explicit dimensions, and specs to explain the intended layout.

<LayoutGrid
  columns={12}
  gutter="24px"
  margin="48px"
  ratio="16 / 9"
  label="Desktop composition"
  specs={[{ term: "Alignment", value: "Content follows the column grid" }]}
/>

Describe a mobile composition

Use fewer columns and a portrait ratio to document a narrow canvas. Include the actual dimensions in specs so readers can reproduce the grid.

<LayoutGrid
  columns={4}
  gutter="16px"
  margin="24px"
  ratio="9 / 16"
  label="Mobile composition"
  specs={[
    { term: "Columns", value: "4" },
    { term: "Gutter", value: "16px" },
    { term: "Margin", value: "24px" },
  ]}
/>

Diagram scale

The drawing scales the stated margin to one quarter and the gutter to one half so the diagram stays readable. These values affect the drawing; they do not configure the website’s layout. Add specs when the real dimensions need to appear as text below the diagram.

Use positive whole numbers for columns and CSS lengths for margins and gutters. The component has no content slots.

API reference