在移动设备上，屏幕宽度狭窄，因此通常不使用多栏布局，但是有时你可能需要将小的元素（如按钮或并排导航标签，例如）多列排列在一起。Jquery Mobile 框架提供了一种简单的方法构建基于css 的分栏布局，叫做ui-grid

Jquery Mobile 提供有四个预设的布局，可以在任何情况下都需要列

• 两列（使用ui-grid-a类）
• 三列（使用ui-grid-b类）
• 四列（使用ui-grid-c类）
• 五列（使用ui-grid-d类）

网格是100%的宽度，完全看不见的（没有边界或背景）和没有margin或padding，所以他们不会干扰样式的元素放在他们里面。在网格容器，子元素被分配ui-block-a / b / c/ d 以连续的方式，使每个“块”元素浮动并列，形成网格。其中ui-block-a类基本上清除浮将开始新的一行（见多行的网格，在下面）。

ui-grid-a 两列布局

建立个两列（50 / 50%）布局，第一层（父容器）添加ui-grid-a属性，第二层（两个子容器）里面分别添加ui-block-a和ui-block-b：