A two-column (50%, 50%) grid is shown in Figure 6–1 with its related code in Listing 6–2.
Figure 6–1. Two-column grid
Listing 6–2. Two-column grid (ch6/grid-2col.html)<div data-role="content">
<div class="ui-grid-a">
<div class="ui-block-a">Block A</div>
<div class="ui-block-b">Block B</div>
</div>
</div>The outer grid is configured with the CSS grid attribute of ui-grid-a. Next, we add two internal blocks. The first block is assigned a CSS value of ui-block-a and the second column is assigned a CSS value of ui-block-b. As shown in Figure 6–1, the columns are equally spaced, borderless, and the text within each block will wrap when necessary. As an added bonus, the grids within jQuery Mobile are flexible and will render responsively across different display sizes (see Figure 6–2).
Figure 6–2. Two-column grid (landscape)
Leave a Reply