jQuery Mobile 网格（Grid）详解
网格（Grid） 是 jQuery Mobile 的 响应式布局系统，基于 块级容器（ui-block），支持 2~5 列，自动等高、等宽、换行，非常适合 按钮组、卡片、表单布局。
替代传统
float或flex，无需 CSS 即可实现移动端响应式。
1. 基本结构
<div class="ui-grid-a">
<div class="ui-block-a">左列（50%）</div>
<div class="ui-block-b">右列（50%）</div>
</div>关键类名：
ui-grid-a→ 2 列ui-grid-b→ 3 列ui-grid-c→ 4 列ui-grid-d→ 5 列ui-block-a/b/c/d/e→ 块顺序
2. 网格类型一览
| 类名 | 列数 | 每列宽度 | 适用场景 |
|---|---|---|---|
ui-grid-a | 2 列 | 50% | 左右布局、表单 |
ui-grid-b | 3 列 | 33.33% | 图标按钮 |
ui-grid-c | 4 列 | 25% | 宫格菜单 |
ui-grid-d | 5 列 | 20% | 数字键盘 |
3. 响应式行为
- 大屏：并排显示
- 小屏：自动换行，每块占 100% 宽度
- 无需媒体查询！
4. 完整示例（可直接运行）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQM 网格系统</title>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<style>
.grid-demo { margin: 15px 0; padding: 10px; }
.ui-block-a, .ui-block-b, .ui-block-c, .ui-block-d, .ui-block-e {
background: #f0f0f0; text-align: center; padding: 20px; margin: 5px 0;
border: 1px solid #ccc; border-radius: 8px;
}
</style>
</head>
<body>
<div data-role="page">
<div data-role="header" data-position="fixed">
<h1>网格布局</h1>
</div>
<div data-role="main" class="ui-content">
<h3>1. 2 列网格（ui-grid-a）</h3>
<div class="ui-grid-a grid-demo">
<div class="ui-block-a"><strong>左列</strong><br>50%</div>
<div class="ui-block-b"><strong>右列</strong><br>50%</div>
</div>
<h3>2. 3 列网格（ui-grid-b）</h3>
<div class="ui-grid-b grid-demo">
<div class="ui-block-a">1</div>
<div class="ui-block-b">2</div>
<div class="ui-block-c">3</div>
</div>
<h3>3. 4 列网格（ui-grid-c）—— 宫格菜单</h3>
<div class="ui-grid-c grid-demo">
<div class="ui-block-a">
<a href="#" class="ui-btn ui-icon-home ui-btn-icon-top ui-shadow">首页</a>
</div>
<div class="ui-block-b">
<a href="#" class="ui-btn ui-icon-search ui-btn-icon-top ui-shadow">搜索</a>
</div>
<div class="ui-block-c">
<a href="#" class="ui-btn ui-icon-shop ui-btn-icon-top ui-shadow">购物车</a>
</div>
<div class="ui-block-d">
<a href="#" class="ui-btn ui-icon-user ui-btn-icon-top ui-shadow">我的</a>
</div>
</div>
<h3>4. 5 列网格（ui-grid-d）—— 数字键盘</h3>
<div class="ui-grid-d grid-demo">
<div class="ui-block-a"><button class="ui-btn">1</button></div>
<div class="ui-block-b"><button class="ui-btn">2</button></div>
<div class="ui-block-c"><button class="ui-btn">3</button></div>
<div class="ui-block-d"><button class="ui-btn">4</button></div>
<div class="ui-block-e"><button class="ui-btn">5</button></div>
<div class="ui-block-a"><button class="ui-btn">6</button></div>
<div class="ui-block-b"><button class="ui-btn">7</button></div>
<div class="ui-block-c"><button class="ui-btn">8</button></div>
<div class="ui-block-d"><button class="ui-btn">9</button></div>
<div class="ui-block-e"><button class="ui-btn">0</button></div>
</div>
<h3>5. 表单布局（2列）</h3>
<form class="grid-demo">
<div class="ui-grid-a">
<div class="ui-block-a">
<label for="name">姓名：</label>
<input type="text" id="name" placeholder="输入姓名">
</div>
<div class="ui-block-b">
<label for="email">邮箱：</label>
<input type="email" id="email" placeholder="输入邮箱">
</div>
</div>
<button type="submit" class="ui-btn ui-btn-b ui-corner-all">提交</button>
</form>
<h3>6. 当前信息（响应式）</h3>
<div class="ui-grid-a grid-demo">
<div class="ui-block-a">
<strong>时间</strong><br>
2025年11月17日 03:04（CET）
</div>
<div class="ui-block-b">
<strong>国家</strong><br>
比利时 (BE)
</div>
</div>
</div>
<div data-role="footer" data-position="fixed">
<h4>比利时 © 2025</h4>
</div>
</div>
</body>
</html>5. 网格属性与技巧
| 技巧 | 说明 |
|---|---|
| 等高块 | 自动等高（无需 JS） |
| 嵌套网格 | 支持 ui-grid 嵌套 |
加 ui-shadow | 按钮阴影 |
加 margin | 块间距 |
| 响应式换行 | 自动 100% 宽度 |
<!-- 嵌套示例 -->
<div class="ui-grid-a">
<div class="ui-block-a">
<div class="ui-grid-b">
<div class="ui-block-a">子1</div>
<div class="ui-block-b">子2</div>
<div class="ui-block-c">子3</div>
</div>
</div>
<div class="ui-block-b">右列</div>
</div>6. 最佳实践
| 建议 | 说明 |
|---|---|
优先用 ui-grid-a | 最常用 |
按钮用 ui-shadow | 立体感 |
| 表单用 2 列 | 提升输入体验 |
| 避免 5 列放文字 | 太窄 |
| 小屏测试 | 确保换行美观 |
7. 常见问题
| 问题 | 解决方案 |
|---|---|
| 块不换行 | 检查是否在 ui-content 中 |
| 宽度不均 | 确保所有块都在同一 ui-grid-* |
| 按钮太小 | 加 ui-mini 或 padding |
| 高度不齐 | 正常，jQM 自动等高 |
8. 推荐布局模板
<!-- 宫格菜单（4列） -->
<div class="ui-grid-c">
<div class="ui-block-a"><a href="#" class="ui-btn ui-icon-home ui-btn-icon-top">首页</a></div>
<div class="ui-block-b"><a href="#" class="ui-btn ui-icon-search ui-btn-icon-top">搜索</a></div>
<div class="ui-block-c"><a href="#" class="ui-btn ui-icon-shop ui-btn-icon-top">购物车</a></div>
<div class="ui-block-d"><a href="#" class="ui-btn ui-icon-user ui-btn-icon-top">我的</a></div>
</div>
<!-- 表单双列 -->
<div class="ui-grid-a">
<div class="ui-block-a"><label>标签</label><input type="text"></div>
<div class="ui-block-b"><label>标签</label><input type="text"></div>
</div>总结：网格速查
| 列数 | 类名 | 每列宽 |
|---|---|---|
| 2 列 | ui-grid-a | 50% |
| 3 列 | ui-grid-b | 33.33% |
| 4 列 | ui-grid-c | 25% |
| 5 列 | ui-grid-d | 20% |
推荐：
ui-grid-a+ui-grid-c
需要我为你生成：
- 9 宫格应用首页？
- 响应式仪表盘（多网格嵌套）？
- 网格 + 卡片翻转动画？
随时告诉我！
