网格布局Grid
你可能会说
这些卡片排成整齐的格子，屏幕窄了自动变成两列。
基于二维行与列网格定位并分配元素位置与占比的二维排版系统。商品或模板列表需要随屏幕宽度自动换列时，可在父元素上定义 grid，再用 repeat(auto-fit, minmax(200px, 1fr)) 作为起点。最小宽度必须按标题、图片和操作仍能看清来调整；只有一条轴的简单排列用弹性布局 Flex往往更直接。
也常被叫作网格布局栅格布局Grid布局CSS Grid
组成结构 · 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
延伸阅读 · 权威出处