学习前提
理解Grid、媒体查询和容器宽度；使用支持容器查询的现代浏览器。
本课完成后你能做什么
让相同卡片在窄侧栏和宽正文中采用不同布局，而不依赖整个窗口宽度。
先理解机制
媒体查询通常看视口，容器查询看组件所在容器。桌面窗口很宽时，侧栏仍可能只有280像素，因此仅靠视口断点会让侧栏卡片错误地采用横排。把容器作为设计约束，组件复用时更可靠。
在外层建立container-type:inline-size，再对后代应用@container条件。被查询容器不应靠查询自身宽度反复改变自己的宽度，否则会形成循环依赖；尺寸约束与内部布局职责分开。给容器命名可避免嵌套时查询错层。
先写窄布局作为基础，再在空间充足时扩展为多列。这样不支持容器查询的环境仍能读到完整内容。断点使用组件真正需要的空间，尤其考虑按钮、长标题和英文翻译。
容器单位和更多查询能力可以后续学习，先掌握基础尺寸查询。不要给所有元素无差别加containment，它会影响尺寸计算。复用测试应包括同一屏幕上同时出现两个不同宽度实例。
可运行示例
运行方式：将HTML示例保存为独立的.html文件并在浏览器打开；含脚本的示例使用现代浏览器。资源文件与多文件模块另按正文要求准备。
<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Honeysuck practice</title></head><body>
<style>
.wrapper{container:course / inline-size;width:100%;margin:16px 0}
.card{display:grid;gap:16px;padding:20px;border:1px solid #b8cdbd;border-radius:12px}
.card .badge{background:#edf4e9;padding:20px;font-weight:bold}
@container course (min-width:500px){.card{grid-template-columns:120px minmax(0,1fr);align-items:center}}
.narrow{max-width:300px}.wide{max-width:760px}
</style><div class="wrapper narrow"><article class="card"><div class="badge">HTML</div><div><h2>Semantic content</h2><p>A narrow instance stays stacked.</p></div></article></div>
<div class="wrapper wide"><article class="card"><div class="badge">HTML</div><div><h2>Semantic content</h2><p>A wider instance can use two columns.</p></div></article></div>
</body></html>推演与验证
在宽屏中，两实例应分别竖排与横排。缩小整个窗口到400像素，两者都应竖排。将宽实例放入300像素父容器而保持窗口不变，它也应回到竖排。开发者工具查看命名容器与匹配规则。
常见错误与边界
如果设置容器的元素没有外部可用尺寸约束，结果可能与预期不同。不要把@container写在组件外层却期待它查询自己；规则作用于合适的后代。
动手练习
给卡片增加操作链接，在窄容器中占满一行，宽容器中与说明并排。测试20字中文标题与长英文标题。
参考解法与理由
保持窄布局为默认，只在容器条件内调整网格区域或列。给文本列minmax(0,1fr)，允许长内容换行；不要用固定标题高度制造等高。