学习前提
完成盒模型与 Flexbox；能区分容器和直接子项。
本课完成后你能做什么
使用网格轨道建立二维布局，理解 fr、minmax 和自动列数，选择 Flex 或 Grid 时有明确理由。
先理解机制
Grid 先定义行列轨道，再把项目放入网格；Flex 更关注一条轴上的项目流动。卡片集合、主内容加侧栏等具有明确列关系的布局适合 Grid。fr 分配的是可用剩余空间，不是整个容器的无条件百分比；间隙、固定轨道和最小内容约束都会参与计算。
repeat 减少重复声明，minmax 指定轨道的下限和上限。auto-fit 会在可用空间内建立适合的轨道并折叠空轨道，而 auto-fill 更倾向于保留空轨道。使用 minmax(0,1fr) 能允许弹性轨道缩到内容最小宽度以下，但内容如何呈现仍需自己处理，不能以裁切作为默认答案。
可运行示例
<style>
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:16px}
.cards article{padding:24px;border:1px solid #ccd;background:#f4f7ef;min-width:0}
</style>
<div class="cards"><article><h2>HTML</h2><p>Structure</p></article><article><h2>CSS</h2><p>Layout</p></article><article><h2>JavaScript</h2><p>Behavior</p></article></div>推演与验证
把示例放进页面，使用开发者工具显示网格线。拖动窗口到只能放下一列，确认 min(100%,220px) 不会要求容器至少220px宽。然后删除两张卡片，比较 auto-fit 与 auto-fill 的结果，解释空轨道是否保留。最后给一张卡片增加两段文字，观察默认拉伸如何使同一行卡片高度一致。
常见错误与边界
不要把二维布局所有位置都写成绝对像素。跨行跨列会改变视觉位置，但不会自动改变源码阅读顺序。Grid 本身不是表格语义；呈现真正行列数据时仍应使用 table。嵌套网格可以各自承担局部布局，无需把整页压进一个复杂网格。
动手练习
实现宽屏左侧目录240px、右侧正文自适应，窄屏堆叠的布局，并在正文加入长代码行。
参考解法与理由
宽屏轨道可写240px minmax(0,1fr)，正文代码块 overflow:auto。窄屏回到单列，目录保持在正文之前。这样让代码自己滚动而不是让整页横向滚动，也没有破坏阅读顺序。