CSS Grid 布局的三层心法

Grid 的属性很多，但真正需要记住的判断只有三层。把这三层理顺之后，我写布局的速度快了很多，也很少再出现「明明写了却没生效」的情况。

第一层：先画轨道

最基础的用法就是明确告诉浏览器：这一行有几列，每列多宽。

.layout {
  display: grid;
  grid-template-columns: 17.5rem minmax(0, 1fr) 17.5rem;
  gap: 1rem;
}

这里的 minmax(0, 1fr) 值得单独说一句。写成 1fr 的时候，轨道的最小尺寸默认是 auto，也就是「内容不许被压缩」，于是长代码块、长英文单词会把整列撑破，页面出现横向滚动。

把它显式写成 minmax(0, 1fr)，等于告诉浏览器：这一列可以被压到 0。中间内容区就再也不会撑破布局了。

第二层：给区域起名字

当布局有了明确的语义分区，用 grid-template-areas 会比数行号和列号直观得多。

.page {
  display: grid;
  grid-template-columns: 17.5rem 1fr;
  grid-template-areas:
    "sidebar main"
    "sidebar footer";
  gap: 1rem;
}

.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }

它最大的价值是可读性。半年后再看这段代码，你一眼就知道页面长什么样，不需要在脑子里把 grid-column: 2 / 3 翻译成图形。

改版的时候特别好用

响应式改版只要重写一次区域图：

@media (max-width: 768px) {
  .page {
    grid-template-columns: 1fr;
    grid-template-areas:
      "main"
      "sidebar"
      "footer";
  }
}

结构没变，只换了排布。这种改法比逐个元素覆盖样式安全得多。

第三层：交给浏览器自己排

当你不关心有几列、只关心「卡片别太窄」的时候，就该让 Grid 自己决定列数。

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

auto-fill 会尽量多塞列，空出来的位置保留；auto-fit 则会把空轨道折叠掉，让现有元素铺满整行。做卡片列表时，我通常用 auto-fit，因为项目少的时候不希望右边空一大块。

这一层的好处是彻底摆脱断点。窗口怎么拉，列数都自己算，不需要为 768、1024、1280 各写一遍。

三层心法可以浓缩成一句话：能自动就别写死，需要语义就用区域，需要精确才回到轨道。

几个常被问到的细节

什么时候该用回 flex

一行或者一列、元素数量不定、主要靠内容撑开尺寸的场景，flex 更省事。比如按钮里图标加文字、标签列表、导航栏。

我的判断标准是：如果布局需要在两个方向上同时对齐，用 Grid；只在一个方向上排队，用 flex。

gap 和老写法

有了 gap 之后，就不用再给子元素写 margin-right 再用 :last-child 去掉了。这一条几乎是白捡的可维护性。

小结

Grid 难的不是属性，是在动手之前先想清楚：这个布局是「我知道要几列」，还是「我只知道每块最小多宽」。想清楚这一点，剩下的属性都是顺手查的事。