Category: Formatting Content with Grids and CSS Gradients

A springboard is an ideal candidate for applying our grid layout. In the examples below we will see two types of springboards. First, we will see a springboard styled with app icons (see Figure 6–8) and secondly we will see a springboard styled with Glyphish icons (see Figure 6–9). Figure 6–8. Springboard with app icons Figure 6–9. Springboard with…

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…

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…

A five-column (20%, 20%, 20%, 20%, 20%) grid is shown in Figure 6–5 with its related code in Listing 6–5. The example closely resembles the four-column grid we saw previously except the CSS attribute for the grid is configured to support five columns (ui-grid-d) and we have added an additional block for the fifth column (ui-block-e). Each block contains…

A four-column (25%, 25%, 25%, 25%) grid is shown in Figure 6–4 with its related code in Listing 6–4. 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…

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 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…

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 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…

jQuery Mobile’s grids are configurable to support layouts in the range of two to five columns. From an HTML perspective, grids are div elements that are configured with CSS attributes. The Grid is flexible and will consume the entire width of your display. The grids do not contain borders, padding, or margins so they will not interfere…