jQuery Mobile的网格布局
jQuery Mobile的提供了一组基于CSS的列布局。 然而，列布局通常不建议在移动设备上时，由于移动的屏幕宽度。
但也有要放置较小的元素，如按钮或导航选项卡，并排侧，就好像是在一个表倍。 然后，列是完美的。
在网格中列的宽度相等（在总数的100％宽）的，没有border, background, margin或padding 。
存在可以使用的五种布局格：
| 电网类 | 列 | 列宽 | 对应于 | 例 |
|---|---|---|---|---|
| ui-grid-solo | 1 | 100% | ui-block-a | Try it |
| ui-grid-a | 2 | 50% / 50% | ui-block-a|b | Try it |
| ui-grid-b | 3 | 33% / 33% / 33% | ui-block-a|b|c | Try it |
| ui-grid-c | 4 | 25% / 25% / 25% / 25% | ui-block-a|b|c|d | Try it |
| ui-grid-d | 5 | 20% / 20% / 20% / 20% / 20% | ui-block-a|b|c|d|e | Try it |
中列容器，子元素可以有一流的ui-block-a|b|c|d|e ，取决于列数。 列将浮并排侧。
例1：对于UI的网格类（这是一个两栏布局），你必须指定的两个子元素ui-block-a和ui-block-b 。
例2：对于ui-grid-b三栏布局），添加三个子元素ui-block-a, ui-block-b和ui-block-c
自定义网格
您可以自定义使用CSS的列块：
例
<style>
.ui-block-a, .ui-block-b, .ui-block-c {
background-color: lightgray;
border: 1px solid black;
height:
100px;
font-weight: bold;
text-align: center;
padding: 30px;
}
</style>
试一试» 您也可以通过使用内嵌样式自定义模块：
<div class="ui-block-a" style="border:1px solid
black;"><span>Text..</span></div>
多行
它也可能有有你列内的多个行。
注： ui-block-a-class总是会创建一个新的行：
例
<div class="ui-grid-b">
<div class="ui-block-a"><span>Some
Text</span></div>
<div class="ui-block-b"><span>Some
Text</span></div>
<div class="ui-block-c"><span>Some
Text</span></div>
<div class="ui-block-a"><span>Some
Text</span></div>
<div class="ui-block-b"><span>Some
Text</span></div>
<div class="ui-block-a"><span>Some
Text</span></div>
</div>
试一试» 响应网格
在小屏幕上，不建议会对一行文本并排侧太多的按钮 - 作为文本可能会被缩短。
为了响应网格，用户界面响应类添加到容器：