上QQ阅读APP看书，第一时间看更新

Nested columns

Columns can be nested in more complex layouts. To achieve that, just nest elements with the ui-g-* style classes:

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

With this structure, columns with different content will not have equal height. There is a more robust solution to force equal height for columns with different content. Just wrap the internal div elements inside another div with the ui-g style class or even simpler, assign ui-g to the column having nested columns:

<div class="ui-g">
  <div class="ui-g ui-g-8 ui-g-nopad">
    <div class="ui-g-6">6<br/>6<br/>6<br/>6<br/>6<br/>6<br/></div>
    <div class="ui-g-6">6</div>
    <div class="ui-g-12">12</div>
  </div>
  <div class="ui-g-4">4</div>
</div>

The result looks like the following:

Columns have a default padding of 0.5em. To remove it, you need to apply the ui-g-nopad style class. This was demonstrated in the earlier examples.