CSS 网格排版的三种实用模式

现代 CSS 能做的事比很多人以为的多。下面三种布局都不需要任何框架。

一、内容 + 侧栏

最常用的一种，用 minmax 保证主线不被挤压：

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: clamp(24px, 5vw, 64px);
}

minmax(0, 1fr) 里的 0 很关键。如果写成 1fr，长单词或代码块会把列撑破，因为 1fr 的最小值是 auto。

二、注记栏

文章页左侧放日期、字数、进度——这类内容需要粘性，但不应占据视线：

.post-grid {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: 48px;
}
 
.post-aside {
  position: sticky;
  top: 96px;
  align-self: start;
}

align-self: start 必须写，否则网格项默认 stretch，粘性定位不会生效。

三、自动填充的卡片墙

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

auto-fill 和 auto-fit 的区别：容器很宽时会保留空轨道（fill），或者把现有项拉开（fit）。卡片墙一般用 fill。

断点的处理

我只有一个断点：

@media (max-width: 900px) {
  .post-grid {
    grid-template-columns: 1fr;
  }
 
  .post-aside {
    position: static;
    flex-direction: row;
  }
}

理由：布局本质上是「能不能并排」的二值判断，中间状态用 clamp() 和 minmax() 连续过渡就够了。两三个断点反而容易出现「哪个断点下最难看」的空档。

一条经验

写网格时先在纸上画格子，标出「必须对齐」的线和「可以自由伸缩」的区域，然后：

• 必须对齐的线 → grid-template-columns 的固定值
• 可以伸缩的 → minmax() 或 1fr
• 间距 → gap + clamp()，不要在子元素上写 margin

最后这条能省掉大量「为什么这里多出 8px」的调试时间。