# 布局網格 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)重復