栅格系统 (Grid System)
基于栅格的响应式布局，将页面分成若干列（如12列），通过列的组合实现不同宽度。
常见栅格系统
| 框架 | 列数 | 特点 |
|---|---|---|
| Bootstrap | 12列 | 最流行、功能完善 |
| Tailwind | 12列 | 原子化CSS、灵活 |
| Foundation | 12列 | 响应式强大 |
| Ant Design | 24列 | 企业级组件库 |
应用场景
适用：各类网站的主要布局结构、响应式页面
示意图
col-12 (100%)
col-6
col-6
col-4
col-4
col-4
3
3
3
3
12列栅格系统
实际例子 - Bootstrap风格后台布局
/* Bootstrap 12列栅格 */
.row {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 16px;
}
.col-8 { grid-column: span 8; }
.col-4 { grid-column: span 4; }
.col-3 { grid-column: span 3; }