VISUAL EXAMPLE
先看懂它怎么工作
CSS Grid 网格布局
层 1定义网格轨道
层 2放置项目
层 3调整跨行跨列
层 4响应断点
MECHANISM
运行机制
- 定义网格轨道
- 放置项目
- 调整跨行跨列
- 响应断点
USE WHEN
适合这样用
卡片矩阵、仪表盘和复杂页面骨架
NOT FOR
不要这样理解
简单单轴排列不必使用复杂网格
TELL YOUR AGENT
可直接发给 Agent
请按“CSS Grid 网格布局”的概念处理这个需求:桌面三列、平板两列、手机单列,卡片宽度保持稳定。。先说明实现边界,再给出可检查的结果。ACCEPTANCE
怎么确认它真的做好了
轨道在各断点可预测,内容不会撑破列宽或产生横向滚动
OFFICIAL SOURCES
