Uneven Grids

So far, every grid example shown had evenly spaced columns because jQuery Mobile will space all columns equally by default. However, if you need to customize the column dimensions we can adjust the widths in CSS. For instance, we can modify the default widths in our 2-column grid to a 25/75% grid by setting the custom width of each block (see Figure 6–7 and its related code in Listing 6–7). As a result, our grids can be modified to support a wide range of alternate dimensions.

Figure 6–7. Uneven grid

Listing 6–7. Uneven grid (ch6/grid-uneven.html)<style>
        /* Set 2-column grid to 25/75% */
        .ui-grid-a .ui-block-a {
            width: 25%;
        }
        .ui-grid-a .ui-block-b {
            width: 75%;
        }
        
        /* Set 3-column grid to 25/50/25% */
        .ui-grid-b .ui-block-a {
            width: 25%;
        }
        .ui-grid-b .ui-block-b {
            width: 50%;
        }
        .ui-grid-b .ui-block-c {
            width: 25%;
        }                                                                        
</style>