返回笔记
QUICK NOTE
CSS Grid 布局速查
Grid 布局速查 容器用 display: grid 建立网格；列和行用 grid-template-columns、grid-template-rows 定义。文档里的 a | b 常表示“二选一”，不能整段当 CSS 属性值复制。 自适应卡片 auto-fit 会折叠空轨道；auto-fill 会保留可容纳的空轨
Grid 布局速查
容器用 display: grid 建立网格；列和行用 grid-template-columns、grid-template-rows 定义。文档里的 a | b 常表示“二选一”，不能整段当 CSS 属性值复制。
自适应卡片
<div class="cards"><article>卡片一</article><article>卡片二</article><article>卡片三</article></div>
<style>
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1rem; }
.cards article { min-width: 0; padding: 1rem; border: 1px solid #ccc; }
</style>
auto-fit 会折叠空轨道；auto-fill 会保留可容纳的空轨道。minmax() 的最小值不能直接使用 1fr。
侧栏和正文
.layout { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: 1.5rem; }
.main { min-width: 0; }
@media (max-width: 48rem) { .layout { grid-template-columns: 1fr; } }
minmax(0, 1fr) 避免长内容撑开主轨道；具体的代码块和图片仍需自己的溢出规则。
对齐与跨格
.center { display: grid; place-items: center; min-height: 10rem; }
.wide { grid-column: 1 / -1; }
.two-rows { grid-row: span 2; }
place-items 是 align-items 和 justify-items 的简写，作用于网格项目在各自格子里的对齐；place-content 对齐整组轨道，place-self 只改变当前项目。属性和值之间使用英文冒号。
子网格继承轨道
<div class="catalog"><article class="product"><h3>名称</h3><p>说明</p><strong>价格</strong></article></div>
<style>
.catalog { display: grid; grid-template-columns: 1fr 2fr auto; gap: 1rem; }
.product { display: grid; grid-column: 1 / -1; grid-template-columns: 1fr 2fr auto; gap: 1rem; }
@supports (grid-template-columns: subgrid) {
.product { grid-template-columns: subgrid; }
}
</style>
subgrid 用于 grid-template-columns 或 grid-template-rows，不是 display: subgrid。上例让商品内部三列继承父网格的轨道，回退规则在不支持时保持普通网格。