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>
試一試» 響應網格
在小屏幕上，不建議會對一行文本並排側太多的按鈕 - 作為文本可能會被縮短。
為了響應網格，用戶界面響應類添加到容器：