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。