用 CSS Grid，搭一个会呼吸的页面

一个舒服的布局，往往不需要很多断点。先描述内容需要多少空间，再让浏览器决定如何分配剩余空间，CSS Grid 就能发挥作用。

先从两条轨道开始

假设页面由正文和侧栏组成。侧栏保持 240 像素，正文占据剩下的空间：

.page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 40px;
}

这里的 1fr 表示一份可分配的剩余空间。为什么要包一层 minmax(0, 1fr)？因为网格项目默认的自动最小尺寸可能受内容影响：一段很长的代码或一个不能换行的单词，可能把正文轨道撑出容器。

将最小值设为零允许轨道收缩，但还要处理内容本身。代码块可以使用 overflow: auto，普通文本可以使用 overflow-wrap: anywhere。

让卡片自己决定列数

当内容是重复的文章卡片时，不必为两列、三列分别写断点：

.cards {
  display: grid;
  grid-template-columns:
    repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 24px;
}

每张卡片优先保留 260 像素宽度；容器不足 260 像素时，允许缩小到容器宽度。auto-fit 会折叠空轨道，让已有卡片伸展。auto-fill 则会保留能够容纳的空轨道。只有少量项目时，两者的差别最明显。

断点应该回应内容

两栏正文在窄屏上通常需要变成一栏。断点应当选择在正文已经难以阅读的位置，而不是机械地对应某一种设备名称。

@media (max-width: 760px) {
  .page {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
}

打开开发者工具，缓慢拖动视口。观察标题是否过早换行、侧栏是否挤压正文、图片是否超出边界。再用键盘 Tab 检查焦点顺序：视觉上的位置调整不应该让阅读顺序变得费解。

做一个小实验

回到首页的布局实验，把 Grid 切换成 Flex，再调整间距。你会看到 Grid 可以同时描述行和列，而 Flex 更适合沿一个主轴分配空间。两者都能完成很多布局，选择的依据是内容之间的关系。

保留空间，并不是浪费空间。间距让内容之间的关系变得可读，也是布局的一部分。