CSS Grid 网格布局速查表
CSS Grid 适合二维布局，整理容器和项目属性，配合常用布局模式快速构建复杂页面。
返回 Web 服务容器定义 6
display: grid启用网格布局
grid-template-columns: 1fr 2fr 1fr定义列轨道
grid-template-rows: 100px auto 100px定义行轨道
grid-template-columns: repeat(3, 1fr)重复定义轨道
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))自动填充响应式列
gap: 16px行间距和列间距
区域与命名 4
grid-template-areas: "header header" "sidebar main" "footer footer"命名区域布局
grid-area: header项目放置到命名区域
grid-column: 1 / 3跨列：从第 1 线到第 3 线
grid-row: 1 / span 2跨行：从第 1 线开始跨 2 行
对齐方式 5
justify-items: center单元格内水平对齐
align-items: center单元格内垂直对齐
place-items: center同时设置水平和垂直对齐
justify-content: center网格整体水平对齐
align-content: center网格整体垂直对齐
💡 提示
- fr 是弹性单位，1fr 2fr 表示第二列是第一列的两倍宽。
- minmax(200px, 1fr) 表示最小 200px，最大弹性填充，配合 auto-fill 实现响应式。
- grid-template-areas 用可视化方式定义布局，代码可读性更好。
- gap 替代了旧的 grid-gap，是最新的标准写法。