Three-Column Grid with CSS Enhancements

A three-column (33%, 33%, 33%) grid is shown in Figure 6–3 with its related code in Listing 6–3.

Figure 6–3. Three-column grid with CSS enhancements

Listing 6–3. Three-column grid (ch6/grid-3col.html)<div data-role="content">
    <div class="ui-grid-b">
       <div class="ui-block-a">
          <div class="ui-bar ui-bar-e" style="height:100px">Block A</div>
       </div>
       <div class="ui-block-b">
          <div class="ui-bar ui-bar-e" style="height:100px">Block B</div>
       </div>
       <div class="ui-block-c">
          <div class="ui-bar ui-bar-e" style="height:100px">Block C</div>
       </div>
    </div>
</div>

It closely resembles the two-column example we saw earlier except the CSS attribute for the grid is configured to support three columns (ui-grid-b) and we have added an additional block for the third column (ui-block-c). We also styled the blocks with themeable classes which can be added to any element including grids. In the example, we added ui-bar to apply css padding and added ui-bar-e to apply the background gradient and font styling for the “e” toolbar theme swatch. You may style your blocks with any toolbar theme (ui-bar-*) in the range a through e. Lastly, to create consistent block heights we also styled our height inline (style="height:100px"). Visually, these enhancements have styled our grid with a linear background gradient and our blocks are now segregated with borders.