Thus far we have only seen grids with a single row. To add an additional row, simply repeat the block pattern of the first row for each consecutive row (see Figure 6–6 and its related code in Listing 6–6). The resulting grid contains five columns and three rows. The columns are evenly spaced and you may manually adjust the row height at the block component.
Figure 6–6. Multi-row grid
Listing 6–6. Multi-row grid (ch6/grid-multi-row.html)<div data-role="content">
<div class="ui-grid-d" style="text-align: center;">
<!-- First row -->
<div class="ui-block-a"></div>
<div class="ui-block-b"></div>
<div class="ui-block-c"></div>
<div class="ui-block-d"></div>
<div class="ui-block-e"></div> <!-- Second row -->
<div class="ui-block-a"></div>
<div class="ui-block-b"></div>
<div class="ui-block-c"></div>
<div class="ui-block-d"></div>
<div class="ui-block-e"></div>
</div>
</div>
Leave a Reply