CSS Grid 里的栅栏：让版式不再靠猜

用 Grid 快五年，回头看收益最大的不是那些花哨的布局技巧，而是先画线，再放东西这个习惯。

一个反例

常见的写法是这样：

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

能跑。但当你需要「标题横跨两列、图片占右边一列、底部按钮跟按钮对齐」时，这个网格就废了，只能靠 margin 打补丁。

先画线

把列定义成有名字的线：

.layout {
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--gutter), 1fr)
    [wide-start] minmax(0, 8rem)
    [content-start] minmax(0, 42rem) [content-end]
    minmax(0, 8rem) [wide-end]
    minmax(var(--gutter), 1fr) [full-end];
}

之后任何元素只需要说「我占哪几根线之间」：

.prose   { grid-column: content; }
.pullquote { grid-column: wide; }
.hero    { grid-column: full; }

为什么这个习惯值得

• 改版式只改一处。想把正文从 42rem 加宽到 48rem，改一个值，全文生效。
• 对齐是结构保证的，不是碰巧对上的。
• 新人进来不需要问「这块为什么要 padding-left: 32px」。

用 1fr 排版是在描述结果，用命名的线排版是在描述意图。第二种能活下去。

顺带一句

gap 现在做多列排版完全够用，不需要再引一套栅格库。省下来的那几十 KB，比库带来的「规范感」值钱。