Basic principles

The layout container should have the ui-g style class. Children elements of the layout container become columns when they are prefixed with ui-g-* where * is any number from 1 to 12. The number expresses the taken space of 12 available units. When the number of columns exceeds 12, columns wrap to the next line:

<div class="ui-g">
  <div class="ui-g-2">2</div>
  <div class="ui-g-4">4</div>
  <div class="ui-g-6">6</div>
  <div class="ui-g-8">8</div>
  <div class="ui-g-4">4</div>
</div>

The following layout has two lines (rows):

The same two-row layout is also possible with two ui-g containers:

<div class="ui-g">
  <div class="ui-g-2">2</div>
  <div class="ui-g-4">4</div>
  <div class="ui-g-6">6</div>
</div>
<div class="ui-g">
  <div class="ui-g-8">8</div>
  <div class="ui-g-4">4</div>
</div>

Generally, n containers with the ui-g style class creates n rows.