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.
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><!-- /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:
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:
<fieldset class="ui-grid-a">
<div class="ui-block-a"><button type="submit" data-theme="c">Cancel</button></div>
<div class="ui-block-b"><button type="submit" data-theme="b">Submit</button></div>
</fieldset>
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.
<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-c">Block C</div>
</div><!-- /grid-a -->
This will produce a 33/33/33% grid for our content.
And an example of a 3 column grid with buttons inside: