CSS Grid 不是框架：用三条规则排复杂页面

轨道用 minmax

等宽三列是最容易写也最容易过时的。内容站里，主栏需要可读宽度，侧栏只放目录。我写成：

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

中间列是正文。两侧是留白，不是两个真侧栏。注意 minmax(0, 1fr)，不要写光秃秃的 1fr。轨道里一旦有图片或预格式化代码，1fr 会被内容撑出横向滚动。

卡片列表用 repeat(auto-fit, minmax(16rem, 1fr))。16rem 是我的下限：再窄，标题会折成难看的三行。

区域命名

页面一有页头、主栏、侧栏，就用 grid-template-areas。以后改顺序只改这一处，不必在每个子元素上改 line number。

.page {
  display: grid;
  grid-template-areas:
    "head head"
    "main side";
  grid-template-columns: minmax(0, 1fr) 16rem;
}
.head { grid-area: head; }
.main { grid-area: main; }
.side { grid-area: side; }

窄屏把 areas 改成单列。不要用 display: none 藏侧栏，目录在文章页仍然有用，放到正文下面即可。

dense 要克制

grid-auto-flow: dense 能把小块填进大块留下的洞。相册可以，表单和文章列表不行：阅读顺序会被打乱，键盘用户会觉得焦点在乱跳。

我的规则：内容有时间顺序或因果关系，就保持源顺序。只有视觉拼贴才开 dense。

查属性时用 MDN 的 Grid 指南，比记博客里的速成表可靠。