Grid

Requires class=Grid

Semantic flexible grid layouts. Use the grid to impose a strict grid layout.

A Grid can have many "Row" children.

Grid is a namespace.

NOTE: Having non Row children of a Grid may give unexpected results.


Grid > Row

Requires class=Row

Split a Grid up into rows


Grid > Row > *

Any child of a "Row"

Grid > Row > * Each 'cell' can have its own border and other styles
Col A
lorem ipsum dolar sit amet
Col C

Form Grid

Design complex semantic forms without writing any custom CSS.

Custom Style

Inline

Supported attributes on Rows and Row direct children:

  •  align=left
  •  align=right
  •  align=center
  • valign=top
  • valign=bottom
  • valign=middle

Supported inline style:

width
e.g. style="width:20ex"
If set on a child of the first Row,
it will define the width for the entire column.
Row align= center

NOTE: Using a form element as a direct child of a Row may have unexpected results in some edge cases.


Columns

Auto Widths

left

center

right

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

left center right

Fluid Widths

top left

top center

top right

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

bottom left

bottom center

bottom right