布局网格 Layout grids

因为屏幕通常都比较窄，所以使用多栏布局的方法在移动设备上不是推荐的方法。但是总有时候你会想要把一些小的元素并排放置（比如按钮，或导航标签)

Jquery Mobile框架提供了一种简单的方法构建基于css的分栏布局，叫做ui-grid

Jquery Mobile提供了两种预设的配置布局：两列布局（class 含有 ui-grid-a）和三列布局 （class 含有 ui-grid-b）—几乎可满足需要列布局的任何情况。网格是100%宽的，不可见（没有背景或边框），也没有padding和margin，所以它们不会影响内部元素的样式

两栏布局 Two column grids

要构建两栏的布局（50/50%），先构建一个父容器，添加一个class名字为：ui-grid-a,内部设置两个字容器，分别给第一个子容器添加class：ui-block-a，第二个子容器添加class：ui-block-b

<div class="ui-grid-a">
　 <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 -->

如上所见，默认的两栏没有样式，并行排列。分栏的class可以应用到任何类型的容器上。下一个实例中，我们给表单的fieldset添加class="ui-grid-a"，然后给两个button的所在的子容器添 class="ui-block-a"和class="ui-block-b"。使两个容器各自50%的宽

在下面的区块中，我们增加了两个class,增加ui-bar的class给默认的bar padding，增?ui-bar-e的class应用背景渐变以及工具栏的主题e的字体样式。然后在每个网格的标签内增加style="height:120px"的属性来设置高度

三栏布局 Three-column grids

另一种布局的方式是三栏布局，给父容器添加”class="ui-grid-b"，然后分别给三个字容器添?加 class="ui-block-a"，“class="ui-block-b"，”class="ui-block-c"

<div class="ui-grid-b">
　 <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 -->

就会生成一个 33/33/33% 的分栏布局

3列网格布局里面是按钮的示例

以此类推：如果是4栏布局，则给父容器添加class="ui-grid-c"（2栏为a，3栏为b, 4栏为c, 5栏为d。。。。），子容器分别添加class="ui-block-a"，”class="ui-block-b" “class="ui-block-c".....

多行的网格布局 Multiple row grids

网格化布局也适用于多栏布局的方式，比如，如果你指定了一列布局的父容器，里面有9个子容器，则会包裹为3行，每行3个。可以给每行的第一个容器设置为class=ui-block-a来清除浮动，这样9个子容器的class应为：class=ui-block-(a,b,c,a,b,c,a,b,c)重复