CSS Grid 布局学习笔记

过去我处理复杂布局总是 Flexbox 套 Flexbox，层级深、可读性差。 系统学了 Grid 之后，大部分布局代码都变短了。这篇笔记整理最常用的几个属性。

从三个属性开始

90% 的场景只需要 grid-template-columns、 gap 和 grid-column。 下面是一个经典的三列卡片布局：

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

/* 让某个卡片横跨两列 */
.card-wide {
  grid-column: span 2;
}

repeat 与 minmax 的组合技

响应式网格最常见的写法是一行代码搞定，列数自动适应容器宽度：

grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));

每列最小 240px，剩余空间平均分配。这一个声明可以替代好几个媒体查询断点。

我的速记口诀

容器管分配（template / gap / place-items），项目管占位（span / area / self）。

记住这句话，遇到布局问题时先问自己在操作容器还是项目， 属性范围立刻缩小一半。完整速查表推荐 MDN 的 Grid 文档。