CSS: 手搓12列栅格
最后更新：2026-10-13
栅格系统（Grid System）是网页布局中非常经典的方案——把一行分为若干列（通常是 12 列），通过组合不同的列宽实现多样化布局。Bootstrap 等框架的核心就是栅格系统。
1. 为什么是 12 列？
12 的因数很多：1、2、3、4、6、12，所以它能灵活组合：
- 1 列：占全部 12 份
- 2 列：每列占 6 份
- 3 列：每列占 4 份
- 4 列：每列占 3 份
- 6 列：每列占 2 份
2. 用 Flexbox 实现栅格
(1) 基本结构
▶ 示例
(2) HTML 使用
HTML
<!-- 三栏等宽：每列占 4 份 -->
<div class="row">
<div class="col-4">占 4 列</div>
<div class="col-4">占 4 列</div>
<div class="col-4">占 4 列</div>
</div>
<!-- 两栏不对称：左 3 右 9 -->
<div class="row">
<div class="col-3">占 3 列</div>
<div class="col-9">占 9 列</div>
</div>
<!-- 四栏等宽：每列占 3 份 -->
<div class="row">
<div class="col-3">占 3 列</div>
<div class="col-3">占 3 列</div>
<div class="col-3">占 3 列</div>
<div class="col-3">占 3 列</div>
</div>
3. 添加响应式断点
让栅格在不同屏幕下有不同的列数：
▶ 示例
▶ 试一试(1) 响应式使用示例
HTML
<!-- 手机：堆叠显示；平板：两栏；桌面：四栏 -->
<div class="row">
<div class="col-sm-12 col-md-6 col-lg-3">Col sm 12 col md 6 col lg 3</div>
<div class="col-sm-12 col-md-6 col-lg-3">Col sm 12 col md 6 col lg 3</div>
<div class="col-sm-12 col-md-6 col-lg-3">Col sm 12 col md 6 col lg 3</div>
<div class="col-sm-12 col-md-6 col-lg-3">Col sm 12 col md 6 col lg 3</div>
</div>
4. 添加偏移类
有时候需要让列偏移，比如让内容居中：
▶ 示例
▶ 试一试
HTML
<!-- 让内容位于中间 -->
<div class="row">
<div class="col-6 col-offset-3">
这个内容占据中间6列，左右各偏移3列
</div>
</div>
5. 完整的栅格系统
▶ 示例
6. 用 CSS Grid 实现栅格
也可以使用 Grid 来实现，更简洁：
▶ 示例
▶ 试一试❓ 常见问题
Q 为什么栅格系统都用 12 列？
A 12 能被 2、3、4、6 整除，组合最灵活。可以做出 1/2、1/3、1/4、1/6、2/3、3/4 等各种比例。Bootstrap 等主流框架都采用 12 列栅格，这已经成了事实标准。
Q 手写栅格和用 Bootstrap 的栅格有什么区别？
A 手写栅格能帮你理解原理，Bootstrap 的栅格是封装好的实现。实际项目直接用 Bootstrap 更高效，但理解原理后遇到框架不满足的场景，你也能自己写栅格系统。
Q Flex 版栅格和 Grid 版栅格哪个好？
A 各有利弊。Flex 版适合一维排列，但无法跨行对齐。Grid 版二维能力强，列与列之间可以对齐。如果只需要简单的行内列分配，Flex 版就够了；如果需要网格线对齐，用 Grid 版。
7. 常用布局模式
(1) 圣杯布局（Header + Sidebar + Main + Footer）
这是最常见的页面布局模式：
▶ 示例
▶ 试一试(2) 瀑布流布局（Pinterest风格）
使用Grid实现简单的瀑布流效果：
▶ 示例
▶ 试一试(3) 仪表盘布局
使用Grid实现数据展示面板：
▶ 示例
💡 布局要点： 圣杯布局用
grid-template-areas 定义区域，瀑布流用 repeat(3, 1fr) 均分列，仪表盘用固定列数展示数据卡片。
📖 小节
- 栅格系统是网页布局中久经考验的经典方案
- 用 Flexbox 手写一个 12 列栅格并不复杂——关键是理解
width: 百分比的计算和flex-wrap的配合 - 12 列的优势在于组合灵活，加上响应式断点就能适配各种屏幕
- 虽然现在很多项目会直接用 Bootstrap 或 Tailwind 的栅格系统，但自己动手实现一次，能让你真正理解背后的原理
📝 作业
- 实现上面的完整 12 列栅格系统，创建一个 HTML 页面展示不同列组合的效果（如 3-3-3-3、4-4-4、2-8-2 等）。
- 使用响应式栅格，让一个页面在手机上显示单列、平板上显示两列、桌面上显示四列。
- 使用
col-offset-3让一个内容块在页面中居中显示。 - 使用 Grid 版本重新实现上面的 12 列栅格，对比两个版本的代码差异。
