栅格（Grid）是网页版式最底层的骨架。它把页面水平方向均匀切成若干列，所有内容块都吸附在这些列上，从而获得统一的节奏与对齐关系。之所以绝大多数框架都选择 12 列，是因为 12 能被 2、3、4、6 整除，几乎覆盖了所有常见的分栏需求：二等分每栏 6 列，三等分每栏 4 列，四等分每栏 3 列，主次分栏可以是 8+4 或 9+3。掌握栅格，等于掌握了让版面"自动整齐"的方法。

一、12 列栅格与列、槽的关系

一个完整的栅格由三个核心参数构成：列（Column）、槽（Gutter）和外边距（Margin）。列是放置内容的容器，槽是列与列之间的间距，外边距则是页面两侧的留白。三者共同决定了内容区的实际宽度与节奏感。

以 1200px 宽的内容区为例，常见的配置是 12 列、每列 70px、槽宽 30px、外边距 15px。计算公式为：12 × 70 + 11 × 30 = 1170px，再加上左右外边距就是总宽。槽宽通常取列宽的三分之一到二分之一，过窄会让内容挤在一起，过宽又会破坏整体的连贯性。

二、断点与响应式栅格适配

栅格在不同屏幕宽度下需要不同的列数表现。移动端通常用 4 列栅格，平板用 8 列，桌面用 12 列。断点（Breakpoint）就是切换栅格配置的屏幕宽度临界点。主流的断点划分参考如下：

• 移动端：≤ 699px，4 列栅格，单列内容流
• 平板：700px ~ 1099px，8 列栅格，可做二等分或主次栏
• 桌面：≥ 1100px，12 列栅格，支持复杂分栏
• 宽屏：≥ 1400px，可加大外边距限制最大内容宽度

移动优先（Mobile First）是更稳妥的策略：先写移动端的单列布局，再用 min-width 媒体查询向大屏扩展。这样能保证小屏体验，同时避免大屏样式被小屏覆盖的优先级问题。

三、用 CSS Grid 实现栅格

过去实现栅格要靠浮动或 Flexbox 手动计算，如今 CSS Grid 提供了原生的二维布局能力，是实现栅格的最佳工具。下面是一个标准的 12 列栅格容器写法：

/* 12 列栅格容器 */
.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 30px;   /* 槽宽 */
  row-gap: 30px;
}

/* 子元素跨列：常用的分栏比例 */
.col-12 { grid-column: span 12; }  /* 整行 */
.col-8  { grid-column: span 8;  }  /* 三分之二 */
.col-6  { grid-column: span 6;  }  /* 二分之一 */
.col-4  { grid-column: span 4;  }  /* 三分之一 */
.col-3  { grid-column: span 3;  }  /* 四分之一 */

/* 响应式：移动端全部堆叠成单列 */
@media (max-width: 699px) {
  .grid-12 { grid-template-columns: 1fr; }
  .col-12, .col-8, .col-6, .col-4, .col-3 {
    grid-column: span 1;
  }
}

这段代码里，repeat(12, 1fr) 把容器均分为 12 份等宽列，1fr 是分数单位，表示按比例分配剩余空间。column-gap 直接定义槽宽，比手动加 padding 干净得多。子元素只需声明 grid-column: span N 就能跨 N 列，分栏组合非常灵活。

更精确的起止控制

除了 span，还可以用起止线（line）精确定位。栅格线从 1 开始计数，12 列栅格共有 13 条线。grid-column: 2 / 6 表示从第 2 条线开始，到第 6 条线结束，跨越 4 列。这种方式在做不对称布局或错位排版时特别有用。

/* 用栅格线精确控制位置 */
.feature-banner {
  grid-column: 1 / 8;   /* 占左 7 列 */
}
.feature-side {
  grid-column: 8 / 13;  /* 占右 5 列 */
}

/* 错位排版：跳过首列制造留白 */
.offset-block {
  grid-column: 3 / 11;  /* 居中 8 列，左右各留 2 列 */
}

四、实战：一个典型落地页布局

把前面学到的组合起来，做一个真实落地页的骨架：顶部通栏 Banner、中间三栏特性区、底部主次分栏的内容区。整体用一个 12 列栅格统一管理。

<section class="grid-12">
  <!-- 顶部通栏 -->
  <div class="hero-banner col-12">Hero</div>

  <!-- 三栏特性：每栏 4 列 -->
  <div class="feature col-4">特性一</div>
  <div class="feature col-4">特性二</div>
  <div class="feature col-4">特性三</div>

  <!-- 主次分栏：主 8 列 + 侧 4 列 -->
  <main class="main-content col-8">正文</main>
  <aside class="side-content col-4">侧栏</aside>
</section>

这套结构在桌面端呈现为：通栏在顶、三栏并排、底部主次分栏；在移动端由于媒体查询把栅格改成单列，所有元素自动堆叠成纵向流，无需写额外的布局代码。这就是栅格的威力——一套结构，多端自适应。

五、栅格使用中的常见误区

新手用栅格常犯三个错误。第一是把所有间距都交给栅格的 gap，导致行间距和列间距一样大，破坏纵向节奏——行间距应该单独控制，通常是列间距的 1.2 到 1.5 倍。第二是栅格列数和内容结构不匹配，比如简单的两栏布局硬套 12 列，反而增加了心智负担，这时候直接用 grid-template-columns: 1fr 1fr 更清爽。第三是忘记给栅格容器设置最大宽度，导致在超宽屏上内容被拉得过开，阅读体验下降。

栅格的本质是秩序，但秩序不是目的。当栅格和内容发生冲突时，记住一句话：栅格服务于内容，而不是内容迁就栅格。理解了这一点，你就能从"被栅格框住"进阶到"用栅格表达"。