Grid 布局
CSS Grid
样式与 CSS也叫：网格布局、Grid、栅格布局
一句话：把区域划分成由行和列组成的网格，再把元素放进格子里，适合行列都要对齐的二维布局。
详细解释
给父元素写 display: grid，再用 grid-template-columns 定义有几列、每列多宽。repeat(3, 1fr) 表示三等分，240px 1fr 表示左边固定 240px、右边占满剩余。gap 设置格子间距，grid-column: span 2 让子元素横跨两列。
Grid 擅长「二维」布局：卡片墙、相册、仪表盘的多块区域、「侧边栏 + 顶栏 + 内容」的整页框架。常用写法 repeat(auto-fill, minmax(200px, 1fr)) 能让卡片按容器宽度自动决定每行几个，不写媒体查询也能响应式。
和 Flex 的区别：Flex 沿一条线排，Grid 行列同时对齐。整页框架用 Grid，里面的一排小元素用 Flex。
示例
灰度线框示意，只表达结构，不代表具体视觉风格。
怎么跟 AI 说
可以直接贴给 Cursor、Claude Code 等工具，把里面的业务内容换成你自己的。
商品列表用 Grid 布局做卡片网格：每张卡片最小宽度 220px，根据屏幕宽度自动决定每行几列，卡片间距 16px；同一行的卡片高度保持一致；手机上固定每行 2 列，间距缩小到 8px。