Grid网格布局实战：从基础语法到复杂项目应用

我的写法，亲测靠谱

用 Grid 布局这几年，我踩过不少坑，也总结出一套自己觉得最稳的写法。不是什么高深理论，就是实打实项目里反复验证过的套路。

我一般不会一上来就写 grid-template-areas，虽然它看起来很直观，但一旦结构复杂或者需要响应式调整，维护起来特别痛苦。我更喜欢用 grid-template-columns + grid-column 的组合，控制粒度更细，也更容易做断点适配。

比如下面这个常见的卡片布局，三列等宽，带间距：

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

简单直接，而且 gap 比 margin 干净多了——不用再担心首尾元素的 margin 溢出问题。这点我一开始没注意，用 margin 写了一堆 :not(:last-child)，结果在嵌套 Grid 时直接乱套，折腾了半天才意识到 gap 才是正解。

另外，我强烈建议用 minmax() 配合 auto-fit 来做自适应列数，比媒体查询硬切舒服太多：

.grid-responsive {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}

这个写法在内容少的时候自动撑满，内容多的时候自动换行，最小宽度 250px 保证可读性。我在后台管理系统、商品列表、仪表盘这些地方都用它，几乎没出过问题。唯一要注意的是，minmax 里的最小值别设太小，否则在窄屏上文字会挤成一团，用户根本没法看。

这几种错误写法，别再踩坑了

我见过太多人把 Grid 当成“高级 float”来用，结果写出一堆反模式代码。下面这几个坑，我替你踩过了，你别再跳。

第一个大坑：滥用 grid-template-areas 做动态内容。比如你有个列表，每项结构一样，但有人非要用 area 名字去命名：

/* 别这么干！ */
.item:nth-child(1) { grid-area: item1; }
.item:nth-child(2) { grid-area: item2; }
/* ... */

这完全违背了 Grid 的初衷。Grid 的 area 是为固定结构设计的，比如 header / sidebar / main / footer 这种。动态列表就该用 grid-template-columns 自动排列，靠 JS 或服务端动态生成 DOM 就行，别硬塞 area。

第二个坑：用 width 或 height 控制 Grid 子项尺寸。很多人习惯了 Flexbox 的思路，给子项加 width: 300px，结果发现 Grid 容器根本不认。因为 Grid 的尺寸由 track（轨道）决定，子项默认填满 track。你强行设 width，反而可能破坏对齐或导致溢出。

正确的做法是：要么调整 grid-template-columns 的轨道大小，要么用 min-width / max-width 限制内容，而不是直接设 width。

第三个坑：在 Grid 容器上同时用 justify-content 和 align-content 调整体距。这两个属性只在 track 总和小于容器时生效。如果你用了 1fr，track 已经撑满容器，那它们就完全没作用。这时候你还以为是浏览器 bug，其实是理解偏差。

想居中整个 Grid？先确认你的列定义是不是固定宽度。如果是 repeat(auto-fit, minmax(...)) 这种弹性布局，那就别指望 justify-content: center 能居中——它只会让多余的空白平均分配到两边，而你的列本身已经占满可用空间了。

实际项目中的坑

去年做 jztheme.com 的一个数据看板模块，用 Grid 排布十几个指标卡片。当时为了“美观”，我把 gap 设成了 24px，结果在 1366px 宽的屏幕上，右边留了快 50px 的空白，客户直接吐槽“布局歪了”。

后来我改用 padding 控制容器内边距，Grid 内部只管内容排列，外层容器负责整体居中。这样既保证了卡片间距一致，又避免了容器边缘不对齐的问题。

还有一次，在移动端 Safari 上，Grid 布局的子项高度莫名其妙塌陷。查了半天，发现是因为子项用了 height: 100%，但父级 Grid track 没有明确高度。Safari 对百分比高度的计算比 Chrome 严格得多。解决办法很简单：给 Grid 容器加个 min-height: 0 或者明确设置行高（grid-template-rows），或者干脆别用百分比高度，改用 aspect-ratio 或 padding-top 技巧。

另外，别忘了 Grid 和滚动容器的兼容问题。如果你在一个 overflow: auto 的容器里用 Grid，某些旧版 Android 浏览器会忽略 gap，导致滚动条覆盖内容。这时候我一般会加一层 wrapper，把 gap 转成子项的 padding，虽然啰嗦点，但能保兼容。

最后提一句性能：虽然 Grid 本身性能不错，但如果在一个高频更新的列表里（比如实时股票行情），频繁重排 Grid 可能会卡。这时候我会考虑用虚拟滚动，或者退回到绝对定位 + JS 计算位置——别笑，有时候原始方法反而最稳。

核心代码就这几行

下面是我现在项目里最常用的 Grid 基础模板，直接复制就能用：

.base-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  /* 如果需要固定行高，取消注释下面这行 */
  /* grid-auto-rows: 120px; */
}

/* 如果子项内容高度不一，但你想保持视觉对齐 */
.base-grid > * {
  /* 防止内容撑高破坏网格 */
  overflow: hidden;
}

配合 HTML：

<div class="base-grid">
  <div>Card 1</div>
  <div>Card 2</div>
  <div>Card 3</div>
  <!-- 更多项... -->
</div>

这个组合在 90% 的卡片式布局场景下都能 hold 住。如果遇到特殊需求，比如某一项要跨两列，就单独加个类：

.span-2 {
  grid-column: span 2;
}

简单、清晰、可维护。比写一堆媒体查询省心多了。

结尾碎碎念

Grid 真的很强，但别把它当成万能胶水。有些场景用 Flexbox 甚至传统 float + clearfix 更合适——比如单行导航、垂直居中按钮组。我见过有人硬用 Grid 实现一个简单的水平菜单，结果写了十行 CSS，其实一行 display: flex 就搞定。

工具是死的，人是活的。我的原则是：能用最简单方式实现需求，就别炫技。Grid 最大的优势是二维布局能力，一维场景别硬上。

以上是我踩坑后的总结，希望对你有帮助。有更好的方案欢迎评论区交流——特别是那些我没提到的 edge case，说不定下次我就用上了。