Chap WordPress theme
Chap

Grid

Grids can be used to divide content into (16) columns and rows.

Grid shortcode arguments
Classes
Columnsequal width one column two column three column ... sixteen column
Typecelled internally celled divided padded
Alignmentcentered
Mobilestackable doubling
Otherreversed
Row shortcode arguments
Classes
Columnsequal width one column two column three column ... sixteen column
Mobilestackable doubling
Column shortcode arguments
Classes
Widthone wide two wide three wide ... sixteen wide
Floatleft floated right floated
Alignmentleft aligned center aligned right aligned
Colorred orange yellow olive green teal blue violet purple pink brown grey black
Grid
Column 1
Column 2
Column 3
[grid three column]
  [column]Column 1[/column]
  [column]Column 2[/column]
  [column]Column 3[/column]
[/grid]
Grid with rows
A column in a two column wide row. A column in a two column wide row. A column in a two column wide row. A column in a two column wide row.
Column 1
Column 2
Column 3
Column 4
[grid four column]
  [row two column]
    [column]A column in a two column wide row....[/column]
  [/row]
  [column]Column 1[/column]
  [column]Column 2[/column]
  [column]Column 3[/column]
  [column]Column 4[/column]
[/grid]
Clearing content
Left floated column
Right floated column
Column 1
Column 2
Column 3
[grid]
  [row four column]
    [column left floated]Left floated column[/column]
    [column right floated]Right floated column[/column]
  [/row]
  [row]
    [column three wide]Column 1[/column]
    [column eight wide]Column 2[/column]
    [column five wide]Column 3[/column]
  [/row]
[/grid]
Equal width columns
Column 1
Column 2
Column 3
Column 4
Column 5
[grid equal width]
  [row]
    [column]Column 1[/column]
    [column]Column 2[/column]
    [column]Column 3[/column]
  [/row]
  [row]
    [column]Column 4[/column]
    [column]Column 5[/column]
  [/row]
[/grid]
Responsive grid
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
[grid]
  [column four wide]Column[/column]
  [column four wide]Column[/column]
  [column four wide]Column[/column]
  [column four wide]Column[/column]
  [column four wide]Column[/column]
  [column four wide]Column[/column]
  [column four wide]Column[/column]
  [column four wide]Column[/column]
  [column four wide]Column[/column]
  [column four wide]Column[/column]
[/grid]

Notes

A container can be used alongside a grid to provide a responsive, fixed width container for wrapping the contents of a page.
Nested grid
Left
One
Two
Three
[grid equal width stackable]
  [column]Left[/column]
  [column]
    [ui stackable grid]
      [row]
        [div column]One[/div]
      [/row]
      [row two column]
        [div column]Two[/div]
        [div column]Three[/div]
      [/row]
    [/ui]
  [/column]
[/grid]