CSS Grid Cheatsheet - Grid Layout Reference
复杂页面布局必备的 Grid 速查表，从容器定义到响应式技巧，按场景分类整理，构建页面时直接对照。
Back to Web Services容器定义 8
display: grid启用网格布局（块级）
display: inline-grid启用网格布局（行内级）
grid-template-columns: 1fr 2fr 1fr定义列轨道及比例
grid-template-rows: 100px auto 100px定义行轨道及大小
grid-template-columns: repeat(3, 1fr)重复定义 3 等分列
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))自动填充响应式列
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))自动适配响应式列
grid-template-areas: "header header" "sidebar main" "footer footer"命名区域可视化布局
间距与对齐 10
gap: 16px行间距和列间距
row-gap: 16px仅行间距
column-gap: 16px仅列间距
justify-items: stretch单元格内水平拉伸（默认）
justify-items: center单元格内水平居中
align-items: center单元格内垂直对齐
place-items: center同时设置水平和垂直对齐
justify-content: center网格整体水平对齐
align-content: center网格整体垂直对齐
place-content: center同时设置网格整体水平和垂直对齐
网格单元与跨域 7
grid-area: header项目放置到命名区域
grid-area: 1 / 1 / 3 / 3按线定位：行起/列起/行止/列止
grid-column: 1 / 3跨列：从第 1 线到第 3 线
grid-row: 1 / span 2跨行：从第 1 线开始跨 2 行
grid-column: 1 / -1跨满整行（第 1 线到末尾）
grid-column: span 2跨 2 列
grid-row: span 3跨 3 行
显式与隐式轨道 6
grid-auto-columns: 100px隐式列轨道大小
grid-auto-rows: 100px隐式行轨道大小
grid-auto-flow: row自动放置方向：按行（默认）
grid-auto-flow: column自动放置方向：按列
grid-auto-flow: dense稠密填充，填补空缺
grid-auto-flow: row dense按行稠密填充
常用模式 6
grid-template-columns: 1fr 1fr 1fr三等分布局
grid-template-columns: 200px 1fr侧边栏 + 主内容
grid-template-columns: repeat(12, 1fr)12 栅格系统
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr)防止内容溢出撑破轨道
grid-template-areas: "header" "main" "footer"单列堆叠布局
grid-column: 1 / -1项目横跨整行
响应式技巧 5
repeat(auto-fit, minmax(200px, 1fr))自动适配，空轨道折叠拉伸填满
repeat(auto-fill, minmax(150px, 1fr))自动填充，保留空轨道占位
repeat(auto-fit, minmax(min(100%, 250px), 1fr))结合 min() 防小屏溢出
@media (max-width: 768px) { grid-template-columns: 1fr }移动端切换为单列
grid-auto-rows: minmax(150px, auto)响应式行高自适应内容
💡 Tips
- fr 是弹性单位，1fr 2fr 表示第二列是第一列的两倍宽。
- minmax(200px, 1fr) 表示最小 200px，最大弹性填充，配合 auto-fill 实现响应式。
- grid-template-areas 用可视化方式定义布局，代码可读性更好。
- gap 替代了旧的 grid-gap，是最新的标准写法。
- auto-fit 会折叠空轨道拉伸填满，auto-fill 保留空轨道，响应式布局常用 auto-fit。