用 Grid 排二维卡片

这一节要完成什么

把学习记录做成自动适应列数的卡片网格。

先理解：为什么要学它

Grid 同时控制行和列，适合二维关系。

跟着做

.lesson-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1.25rem;
}
.featured {
  grid-column: 1 / -1;
}

1. 给卡片父容器加 grid，不修改卡片内容顺序。
2. 从固定两列开始，再改成 auto-fit/minmax。
3. 依次测试 320、768、1280px，记录列数变化。
4. 只让真正重要的卡片跨全宽，检查阅读顺序仍合理。

关键代码怎么读

• Grid 同时控制行和列，适合二维关系。
• minmax 的最小值保护可读宽度，1fr 分配剩余空间。
• 视觉跨列不能改变源码阅读顺序。

常见错误：看到什么，检查什么

自己完成一次

制作至少 5 张学习记录卡，宽屏三列、中屏两列、窄屏一列，不写三个重复媒体查询。

完成检查

• 我完成了本节要求的可见结果
• 我能解释关键代码的输入、处理和输出
• 我测试了正常、边界和错误情况