学习前提
理解CSS Grid、minmax、盒模型和可访问链接；不需要先学存储。
本课完成后你能做什么
构建从单列到多列自然适配的课程列表，并覆盖长标题与空内容。
先理解机制
先定义卡片字段：标题、摘要、主题和目标链接，保持内容结构一致。课程列表可用ul/li，每张卡片内使用标题与段落；若项目采用article结构，也应保证外层有明确的列表区域标题。
Grid负责列轨道，卡片内部Flex负责纵向排列，这是两种布局职责的组合。auto-fit与minmax允许浏览器根据可用宽度决定列数；最小宽度不得超过窄屏可用空间。布局断点应由内容拥挤程度决定，而不是只按手机型号。
以不同长度数据测试：一字标题、长英文单词、多段描述、只有一张卡片、十张卡片。长链接可用overflow-wrap处理；但不要全局隐藏横向溢出来掩盖错误。内容缺失应有明确文本或直接省略该字段。
示例是静态列表，不需要JavaScript来计算列数。只有搜索、收藏等状态行为才引入脚本。保持基础内容不依赖脚本，能让页面在加载中或脚本失败时仍可阅读。
可运行示例
<!doctype html>
<html lang="en"><head><meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Learning cards</title><style>
body{margin:0;font:17px/1.6 system-ui;background:#f6f7f2;color:#223b2e}
main{max-width:1000px;margin:auto;padding:40px 20px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:20px}
article{padding:28px;border:1px solid #d8dfd5;border-radius:16px;background:white}
</style></head><body><main>
<h1>Your learning path</h1><div class="grid">
<article><h2>HTML</h2><p>Create meaningful structure.</p></article>
<article><h2>CSS</h2><p>Design a flexible layout.</p></article>
<article><h2>JavaScript</h2><p>Add useful interaction.</p></article>
</div></main></body></html>推演与验证
在320、375、768、1280像素验证列数变化，确保没有卡片被裁掉。禁用JavaScript后内容仍应存在。每个链接的文本应说明目标；用键盘访问所有卡片，焦点次序应与视觉顺序一致。
常见错误与边界
卡片等高不意味着给描述固定高度。整卡链接内不能再放收藏按钮，否则产生嵌套交互。实际图片加入后还需测试加载失败、宽高比和替代文本。
动手练习
增加一条较长英文课程摘要，与中文版本比较高度；为无匹配结果设计空状态文案。
参考解法与理由
让内容决定高度，按钮通过弹性空白对齐。空状态位于列表区域，说明可清除筛选，而不是呈现空白屏。若尚无筛选功能，不要显示无法使用的筛选控件。