正在学习
04构建布局与组件
实战任务
完成一张可复用课程卡片
先用 Grid 划分封面和正文，再用 Flex 安排标题与状态；最后补齐 hover、focus-visible 和移动端布局。
课程工作台 · 组合实战 04
把工具类收拢成一个真的工作台
切换密度、强调色和辅助栏。每次变化都落在组件边界里，而不是复制出另一套页面。
课程工作台组合预览
继续学习
下午好，小林
今天完成一个组件，就算赢。
预计 18 分钟
已完成实验
2 / 4
本章练习时间
46 分
待复盘问题
3 个
当前组合骨架
grid grid-cols-1 lg:grid-cols-[14rem_minmax(0,1fr)_17rem]
辅助栏展示中；内容区保留 minmax(0,1fr) 避免溢出。