Grid System
Domma uses native CSS Grid via shortcodes. Use [grid], [row], and [col] in the editor - no HTML needed.
Equal Columns
2 Columns
Left column
Each [col] fills one track of the grid automatically.
Right column No extra attributes needed for equal widths.
3 Columns
One - first of three.
Two - second of three.
Three - third of three.
4 Columns
Alpha
Beta
Gamma
Delta
Column Spanning
Use span="N" on a [col] to make it span more than one track. Values must add up to cols.
8 / 4 split
span="8" - main content area (two-thirds).
span="4" - sidebar (one-third).
6 / 6 (halves)
span="6" - left half.
span="6" - right half.
9 / 3
span="9" - wide column.
span="3" - narrow aside.
Gap Sizes
gap="1"
One
Two
Three
Four
gap="3"
One
Two
Three
Four
gap="6"
One
Two
Three
Four
Row (Flexbox)
[row] uses flexbox - columns share available space equally without specifying a count.
Flex col 1
Flex col 2
Flex col 3