CSS Grid 实用指南：我在真实项目里用到的 8 个模式

一、固定侧栏 + 自适应内容区

这是本博客最核心的一行布局：

.layout {
  display: grid;
  grid-template-columns: 296px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

minmax(0, 1fr) 里的那个 0 很关键。如果写成 1fr，当内容里有一个很宽的 <pre> 时，列会被撑破；写 minmax(0, 1fr) 才允许列缩小到内容宽度以下，配合 overflow: auto 就得到正确的滚动行为。

二、卡片自动填充

不需要媒体查询：

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

auto-fill 与 auto-fit 的区别只在一件事上：只有一两个元素时，auto-fit 会把它们拉宽铺满整行，auto-fill 会保留空轨道。列表页用 auto-fill，营销页用 auto-fit。

三、贡献热力图

GitHub 那张绿格子图，用 Grid 只要三行：

.graph {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(7, 11px);
  grid-auto-columns: 11px;
  gap: 3px;
}

grid-auto-flow: column 让元素先往下排 7 个，再换列，正好对应「一周 7 天、一列一周」。

四、给单元格命名行列

月份标签要比格子宽，可以用显式的列区间：

<span class="g-month" style="grid-column: 12 / span 3">4月</span>

五、表格与代码块的横向滚动

.post-layout { grid-template-columns: minmax(0, 1fr) 220px; }
.table-wrap { overflow-x: auto; }

六、对齐：align-items: start

Grid 默认 stretch，会让侧栏被拉到和正文一样高。想要「贴顶」就要显式声明：

.layout { align-items: start; }

七、先给小屏再给大屏

我的习惯是移动端优先，桌面端用 min-width 覆盖：

八、一个真实踩坑：gap 与 margin 混用

如果你同时用 gap 和子元素的 margin-bottom，间距会不可控地叠加。统一用 gap，把子元素的 margin 归零——这是我重构时删掉的最多的一类 CSS。

结论：Grid 真正的价值不是「能排布局」，而是「让间距只在一个地方定义」。