网格布局Grid
你可能会说
这些卡片排成整齐的格子，屏幕窄了自动变成两列。
基于二维行与列网格定位并分配元素位置与占比的二维排版系统。商品或模板列表需要随屏幕宽度自动换列时，可在父元素上定义 grid，再用 repeat(auto-fit, minmax(200px, 1fr)) 作为起点。最小宽度必须按标题、图片和操作仍能看清来调整；只有一条轴的简单排列用弹性布局 Flex往往更直接。
先知道
也常被叫作网格布局栅格布局Grid布局CSS Grid
你可以这样告诉 AI Agent
请把模板卡片改为响应式 Grid，用内容可读的最小宽度和 minmax 自动换列，统一使用 gap。不要把卡片固定成三等分。请检查宽屏、平板和手机下没有溢出，卡片操作仍然可见。
什么时候用
- 卡片墙等分多列：repeat(3, 1fr) 可定义三列等宽轨道
- 自适应列数：auto-fill 配合 minmax，可按容器宽度和内容最小宽度换列
- 页面骨架：用列轨道明确侧栏与主要内容的宽度关系
- 使用 gap 管理格距，避免逐个给网格项设置 外边距 Margin
什么时候不用
- 只排一行或一列时，弹性布局 Flex 通常更简单需要同时控制行列关系时，Grid 通常更直接
- 手写 width: 33.33% 建栅格：调整间距时需要额外计算33.33%33.33%33.33%
- 固定列数与列宽可能在窄屏发生溢出，应按内容与断点调整或使用自适应列
- 逐项使用 外边距 Margin 制造格距，会增加边缘项目的单独处理
组成结构 · Anatomy
格子
写上 display: grid 的父元素
定义出来的每一行、每一列
行和列交叉出的格子
统一设置网格行列之间的间距（gap）
常见变体 · Variants
等分列Repeat
卡片墙每列一样宽
自适应AutoFill
宽度变了列数自动增减
带间距Gap
使用 gap 统一管理行列间距
页面骨架TwoColumns
侧栏 + 内容这类整体框架
典型使用场景
图片卡片墙
repeat(3, 1fr) 三列等分
响应式商品列表
auto-fill + minmax，按可用宽度调整列数
仪表盘格子
grid-template-columns: 2fr 1fr
访问趋势
注册用户
8,921转化率
4.6%页面整体骨架
grid-template-columns: 120px 1fr
延伸阅读 · 权威出处
快速练习