网格视图

“网格视图”（Grid View）指把页面横向切成若干等宽列，内容按列摆放。最经典的是 12 列网格：12 能被 2、3、4、6 整除，能组合出几乎所有常见比例，Bootstrap 等框架的栅格即源于此。本节用纯 CSS 手写一个最小可用的 12 列网格，把原理彻底讲透。

12 列网格的原理

12 列意味着每列宽 1/12 ≈ 8.33%，取 N 列就占 N × 8.33%：

列数	宽度	用途举例
4	33.33%	三等分卡片
6	50%	对半分两栏
8	66.66%	主内容区（搭配 4 列侧栏）
12	100%	整行通栏

先定义列宽，再让列向左浮动并留出内边距作为间距：

* { box-sizing: border-box; }
.col { float: left; padding: 0 15px; } /* 左右留白形成列间距 */
.col-4  { width: 33.33%; }
.col-6  { width: 50%; }
.col-8  { width: 66.66%; }
.col-12 { width: 100%; }

组装一个两栏页面

内容 8 列 + 侧栏 4 列，正好凑满 12 列：

<div class="row">
  <div class="col col-8">主内容区</div>
  <div class="col col-4">侧栏</div>
</div>

浮动会让父容器高度塌陷，因此行末必须清除浮动：

.row::after { content: ""; clear: both; display: table; }

效果：左侧约占 2/3、右侧约占 1/3 并排显示，两列之间留有均匀间距。

让网格响应式

手机上一行放不下两栏，用媒体查询让列在窄屏自动堆叠：

@media (max-width: 768px) {
    .col-4, .col-8 { width: 100%; } /* 小屏各自占满一行 */
}

效果：平板与桌面并排显示，手机宽度以下自动上下堆叠——这正是栅格“响应式”的核心用法，也是框架中 col-md-6 之类类名的底层机制。

更现代的写法

float 网格需要处理清除浮动，新项目可改用 flex 或 grid 实现同样效果：

.row { display: grid; grid-template-columns: 2fr 1fr; gap: 15px; }
@media (max-width: 768px) {
    .row { grid-template-columns: 1fr; } /* 小屏改单列 */
}

理解 12 列概念仍然重要：框架文档里的栅格比例、栅格断点，都是同一套思想的封装。

小结

网格视图 = 把宽度切成 8.33% 的倍数 + 内容按列摆放 + 断点处堆叠。亲手实现一遍，你就能彻底读懂 Bootstrap 等框架的栅格体系，再切换到 flex/grid 也毫不费力。