Four-Column Grid with App Icons

A four-column (25%, 25%, 25%, 25%) grid is shown in Figure 6–4 with its related code in Listing 6–4.

Listing 6–4. Four-column grid (ch6/grid-4col.html)<div data-role="content">
  <div class="ui-grid-c" style="text-align: center;">
    <div class="ui-block-a"><img src="images/cloud-default.png"></div>
    <div class="ui-block-b"><img src="images/cloud-bright.png"></div>
    <div class="ui-block-c"><img src="images/cloud-ripple.png"></div>
    <div class="ui-block-d"><img src="images/cloud-sparkle.png"></div>
  </div>
</div>

It is similar to the three-column example except the CSS attribute for the grid is configured to support four columns (ui-grid-c) and we have added an additional block for the fourth column (ui-block-d). Additionally, we centered the app icons within the grid for balance and consistency (style="text-align:center;“). Visually, the grid has evenly spaced app icons that closely resembles an application springboard.

Figure 6–4. Four-column grid with app icons