On a mobile device, using multiple column layouts isn't generally recommended because of the narrow screen width but there are times where you may need to place buttons or other small elements side-by-side.
-The framework provides a simple way to build CSS based columns through the grid block styles. Grids have preset configurations for 2- and 3-column layouts that can be used in any situation that requires columns. Grids are 100% width, completely invisible (no borders or backgrounds) and don't have padding or margins so they shouldn't interfere with the styles of elements palced inside them.
Using multiple column layouts isn't generally recommended on a mobile device because of the narrow screen width, but there are times where you may need to place small elements side-by-side (like buttons or navigation tabs, for example). The jQuery Mobile framework provides a simple way to build CSS-based columns through a block style class convention called ui-grid.
Grids have preset configurations for two- and three-column layouts that can be used in any situation that requires columns. Grids are 100% width, completely invisible (no borders or backgrounds) and don't have padding or margins, so they shouldn't interfere with the styles of elements placed inside them.
To build a two column (50/50%) layout, start with a container with a class of ui-grid-a and add two child containers inside that are classed with ui-block-a for the first column and ui-block-b for the second.
To build a two-column (50/50%) layout, start with a container with a class of ui-grid-a and add two child containers inside that are classed with ui-block-a for the first column and ui-block-b for the second:
<div class="ui-grid-a">
- <div class="ui-block-a">Block A</div>
- <div class="ui-block-b">Block B</div>
+ <div class="ui-block-a"><strong>I'm Block A</strong> and text inside will wrap</div>
+ <div class="ui-block-b"><strong>I'm Block B</strong> and text inside will wrap</div>
</div><!-- /grid-a -->
Note: that we've added a height and color swatches to the grid blocks so you can see them but these don't have any appearance by default.
- -Here is a more realistic example with text inside:
+By default, grid blocks have no style appearance; they simply present content side-by-side. Here is the example above:
The grid classes can be applied to any container. In this example, we've added grid-a to a fieldset to make the two button inside stretch to 50% of the screen width:
And, grid blocks can adopt presentation styles from the theming system — we've added a height and color swatch reference to the grid blocks.
+ +There is a second grid for a 3 column layout (33/33/33%) that is similar in structure but uses class=grid-b on the parent and 3 child wrappers, each with block-a/b/c for the column child containers.