无需媒体查询即可构建自适应网格，并用 subgrid 让嵌套组件在父级的轨道上对齐。
在 Kodokon 中打开本课repeat(auto-fill, ...) 和 repeat(auto-fit, ...) 会在容器宽度允许的范围内创建尽可能多的轨道。二者的区别只在项目数少于可能的轨道数时才显现：auto-fill 会保留空轨道（你的两张卡片停留在其最小尺寸，右侧留有空白），而 auto-fit 会把空轨道折叠为零——被占用的轨道由于设有 1fr 最大值，于是会吸收全部被释放出来的空间，你的两张卡片便横向铺满整个宽度。
.gallery-fill {
display: grid;
grid-template-columns: repeat(
auto-fill, minmax(150px, 1fr)
);
}
.gallery-fit {
display: grid;
grid-template-columns: repeat(
auto-fit, minmax(150px, 1fr)
);
}有两个连资深开发者都会掉进去的 minmax() 陷阱。其一：当容器比 240px 更窄时，minmax(240px, 1fr) 会溢出——这个最小值是一道硬下限。惯用的修复方法是嵌套一个比较函数：minmax(min(100%, 240px), 1fr)。其二：单独的 1fr 等价于 minmax(auto, 1fr)；这个 auto 最小值会让不可断行的内容（一个长 URL、一个 <pre>）把轨道撑得超过它应得的份额。minmax(0, 1fr) 则锁定了分配。
.grid {
display: grid;
gap: 1rem;
grid-template-columns: repeat(
auto-fit,
minmax(min(100%, 240px), 1fr)
);
}subgrid 解决了嵌套组件之间对齐这一由来已久的难题。有了 grid-template-rows: subgrid，内层网格不会自行发明轨道：它会在自己所跨越的区域上采用父级的轨道。它还会继承父级的线名（并可添加自己的），以及 gap（它可以在本地覆盖）。经典场景是：一批卡片的标题、描述和页脚在卡片之间横向对齐，无论其内容长度如何——在 subgrid 之前这几乎无法干净地做到，因为每张卡片都是孤立地计算自己的高度。
.cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
.card {
grid-row: span 3;
display: grid;
grid-template-rows: subgrid;
row-gap: 0.5rem;
}