网格布局Grid
样式与布局基础同时按行和列组织页面内容
什么时候用
- 卡片墙等分多列：repeat(3, 1fr) 一行搞定
- 自适应列数：auto-fill + minmax，宽窄屏都好看
- 页面骨架：侧栏 + 内容两行代码
- gap 统一管格距：不用给每个格子写 外边距 Margin
什么时候不用
- 只排一行或一列 → 弹性布局 Flex 更简单多行多列对齐，是 grid 的主场
- 手写 width: 33.33% 拼栅格：间距一调全崩33.33%33.33%33.33%手写百分比拼栅格，间距一调全崩
- 列数写死，窄屏直接溢出：优先 auto-fill列数写死，窄屏直接溢出
- 用 外边距 Margin 凑格距，最后一列还得单独处理
组成结构 · Anatomy
格子
1网格容器Container写上 display: grid 的父元素
2轨道Track定义出来的每一行、每一列
3单元格Cell行和列交叉出的格子
4网格间距Gap格子之间的缝，一行声明全管
常见变体 · Variants
等分列Repeat
卡片墙每列一样宽
自适应AutoFill
宽度变了列数自动增减
带间距Gap
格距统一管，别给格子写 margin
页面骨架TwoColumns
侧栏 + 内容这类整体框架
典型使用场景
图片卡片墙
repeat(3, 1fr) 三列等分
响应式商品列表
auto-fill + minmax，宽窄屏都好看
仪表盘格子
grid-template-columns: 2fr 1fr
访问趋势
注册用户
8,921转化率
4.6%页面整体骨架
grid-template-columns: 120px 1fr