H5 CSS Grid 二维布局详解

摘要：CSS Grid 是浏览器原生的二维布局系统，能同时控制行与列，远超 Flexbox 的一维能力。本文从基本概念、容器属性、项目属性到实战模式，帮你掌握现代网页布局利器。

一、Grid vs Flexbox

Flexbox 是一维布局：要么沿主轴排，要么沿交叉轴排，适合导航栏、按钮组等单行/单列场景。Grid 是二维布局：可以同时定义行和列，适合整体页面骨架、卡片矩阵、仪表盘等复杂结构。两者互补，不互斥。

一个最小示例：

.layout {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: 60px 1fr 40px;
}

三列两行，中间列自适应，两侧固定宽。

二、容器属性

定义轨道

grid-template-columns: 100px 200px 100px;       /* 三列固定 */
grid-template-columns: 1fr 2fr 1fr;             /* 比例 */
grid-template-columns: repeat(3, 1fr);          /* 重复 */
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));  /* 自适应 */

repeat(auto-fill, minmax(200px, 1fr)) 是响应式卡片墙的常用写法：每列最小 200px，容器变宽时自动增加列数，且每列等分剩余空间。

auto-fill 与 auto-fit 区别：前者保留空轨道占位，后者把空轨道折叠为 0。卡片墙通常用 auto-fill，单元素居中用 auto-fit。

间距

gap: 16px;            /* 行列同间距 */
gap: 16px 24px;       /* 行 16 列 24 */
row-gap: 16px;
column-gap: 24px;

gap 替代了旧的 margin 方案，不会在边缘产生多余外边距。

命名网格

grid-template-areas:
  "header header header"
  "side   main   aside"
  "footer footer footer";

项目用 grid-area 引用：

.header { grid-area: header; }
.main   { grid-area: main; }

可读性极佳，适合整体页面骨架。

对齐

justify-items: start | center | end | stretch;   /* 水平 */
align-items: start | center | end | stretch;     /* 垂直 */
place-items: center center;                      /* 简写 */

容器级控制所有项目。justify-content / align-content 控制整个网格在容器内的对齐（当网格小于容器时）。

三、项目属性

定位

.item {
  grid-column: 1 / 3;   /* 从第1条线到第3条线，跨2列 */
  grid-row: 2 / 4;
}

也可用 span：

grid-column: span 2;
grid-row: 1;

命名线

grid-template-columns: [start] 200px [middle] 1fr [end];

.item { grid-column: middle / end; }

便于语义化定位。

单独对齐

.item {
  justify-self: center;
  align-self: end;
}

覆盖容器的 *-items。

四、隐式网格

当项目超出显式定义的轨道时，自动生成隐式轨道：

grid-auto-rows: 100px;
grid-auto-columns: 80px;
grid-auto-flow: row | column | row dense | column dense;

dense 启用密集填充，小项目会回填前面空位，但可能打乱视觉顺序，慎用。

五、响应式布局

卡片墙

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

无需媒体查询即可在窄屏 1 列、宽屏多列间切换。

圣杯布局

.page {
  display: grid;
  grid-template:
    "header header header" 60px
    "nav    main   aside"  1fr
    "footer footer footer" 40px
    / 200px 1fr 200px;
}

@media (max-width: 720px) {
  .page {
    grid-template:
      "header" 60px
      "nav"    auto
      "main"   1fr
      "aside"  auto
      "footer" 40px
      / 1fr;
  }
}

grid-template 简写一次定义 areas 与轨道，媒体查询里换成单列堆叠即可。

六、常见模式

居中

.center {
  display: grid;
  place-items: center;
  min-height: 100vh;
}

一行搞定水平垂直居中。

12 栅格

.grid12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}
.col-4 { grid-column: span 4; }
.col-6 { grid-column: span 6; }
.col-8 { grid-column: span 8; }

模拟 Bootstrap 栅格，但纯 CSS 实现。

粘性页脚

body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

中间内容区 1fr 撑开，页脚自然贴底。

仪表盘

.dashboard {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: 56px 1fr;
  grid-template-areas:
    "side header"
    "side main";
  height: 100vh;
}

侧栏 + 顶栏 + 主区，固定视口高度，主区内部滚动。

七、子网格 subgrid

.card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
}

子网格让子元素继承父网格的轨道，实现跨卡片对齐标题行。浏览器支持逐步完善，不支持时可用 display: contents 作为退路。

八、与 Flexbox 协作

Grid 管整体骨架，Flex 管局部一维排列：

.page { display: grid; grid-template-columns: 200px 1fr; }
.toolbar { display: flex; gap: 8px; }   /* 工具栏内按钮横向 */

不要试图用一种解决所有问题。

九、调试

Chrome DevTools 的 Layout 面板可叠加网格线、区域编号、轨道尺寸，定位错位非常方便。给容器加 outline: 1px solid 也能快速看清边界。

十、性能与避坑

1. 避免大量 grid-column: 1 / -1 跨整行，会破坏自动布局。
2. auto-rows 用固定值或 minmax，纯 auto 会让行高随内容乱跳。
3. 嵌套 Grid 不要过深，三层以内为佳。
4. dense 慎用，会打乱 DOM 顺序与阅读顺序。
5. 动画 gap 与 grid-template-columns 性能一般，优先动画 transform。

十一、总结

CSS Grid 让二维布局变得声明式且直观：用 grid-template-* 定义骨架，用 grid-area 命名区域，用 gap 处理间距，用 auto-fill + minmax 实现响应式。掌握容器属性、项目定位、命名网格、响应式模式四块即可覆盖绝大多数布局需求。配合 Flexbox 处理局部一维排列，可以基本告别浮动与定位的旧套路。