Grids can be used to divide content into (16) columns and rows.
Grid shortcode arguments
Classes |
|
Row shortcode arguments
Classes |
|
Column shortcode arguments
Classes |
|
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]