Skip to content
Navigation

Primary

Grid

A grid places self-contained blocks — most often cards — in columns. On a phone the blocks stack into one column, on a tablet into two, on a wide screen into the set number.

Example

Markdown

A clear source format.

JSON

Checkable settings.

HTML

A finished static result.

Markup

Markdown
::::grid {columns=3}
:::card
#### First block

Content.
:::
:::card
#### Second block

Content.
:::
::::
  • The grid is the outer block, so it has one more colon than the nested ones: ::::grid around :::card.
  • Inside are Docara blocks, usually cards. The number of blocks need not match the number of columns: the extra ones move to the next row.

Variants

Columns

columns is how many columns there are on a wide screen, from one to four.

Content

The first self-contained block.

Composition

The second self-contained block.

Gap

gap is the space between blocks on the SIMAI Framework spacing scale, from 0 to 4. Keep one step for the whole group so that the rhythm is even.

Wider

The space between the cards is larger.

Air

Handy for large blocks.

Accessibility

  • The grid handles only placement. Readers and screen readers go through the blocks in source order: left to right, top to bottom.
  • Do not reorder blocks for the sake of looks: on a phone they stack in exactly this order.
  • The nested blocks set the headings and the meaning, not the grid.

Parameters

Parameter Values Default Sets
columns 1, 2, 3, 4 3 How many columns there are on a wide screen. On a phone the grid has one column.
gap 0, 1, 2, 3, 4 2 The space between cells on the spacing scale.

See also