使用jqMobi開發app基礎：Grid布局 · jqMobi開發app基礎

# ? ??jqMobi中的?Grid布局，是一種表格式布局，主要是兩列，三列布局。 ? ? ? ? 主要通過類屬性grid表示是表格布局，通過類屬性col2表示分成兩列的表格。col3表示分成3列的表格.。col2-3表示在三列中占居兩列的位置。 ?? 例如： ~~~ <div class="grid"> <div class="col2"> <a href="#home" id='navbar_home' class='icon home' >兩列第一列測試</a> </div> <div class="col2"> <a href="#home" id='A1' class='icon picture' >兩列第二列測試</a> </div> </div> <br /><br /> <div class="grid"> <div class="col3"> <a href="#home" id='A2' class='icon home' >三列測試</a> </div> <div class="col3"> <a href="#home" id='A3' class='icon picture' >三列測試</a> </div> <div class="col3"> <a href="#home" id='A4' class='icon home' >三列測試</a> </div> <div class="col3"> <a href="#home" id='A11' class='icon picture' >三列測試</a> </div> </div> <br /><br /> <div class="grid"> <div class="col1-3"> <a href="#home" id='A5' class='icon home' >三列測試</a> </div> <div class="col1-3"> <a href="#home" id='A15' class='icon home' >三列測試</a> </div> <div class="col1-3"> <a href="#home" id='A16' class='icon home' >三列測試</a> </div> <div class="col2-3"> <a href="#home" id='A6' class='icon home' >三列測試占居兩列</a> </div> <div class="col1-3"> <a href="#home" id='A19' class='icon home' >三列測試</a> </div> </div> ~~~ 顯示效果： ![](https://box.kancloud.cn/2016-02-23_56cbb4b88f2b5.jpg) 可以看到col2表示分成兩列的表格并不是官網上說的2*2的表格。col3表示分成3列的表格，不是官網上說的3*3的表格。 col1-3 和col3似乎是一樣的。但如果縮小屏幕，則顯示效果如下： ![](https://box.kancloud.cn/2016-02-23_56cbb4b89ee20.jpg) ? 都變成了單列顯示，原來使用的是響應式布局。官網上說：On phones, the grid system will always default to a single row. On tablets, the grid will display inline. [官網參考](http://app-framework-software.intel.com/documentation.php#afui/afui_grid)