CSS Grid 布局通过定义容器、行列、间距和项目定位实现二维布局。1. 设置 display: grid 启用布局；2. 用 grid-template-columns/rows 定义列宽行高，支持 fr 单位；3. 使用 gap 控制间距；4. 通过 grid-column/row 或 span 指定项目位置；5. grid-area 简写四边界；6. grid-template-areas 创建命名区域直观布局；7. repeat() 结合 auto-fit/minmax() 实现响应式网格。掌握这些可高效构建复杂页面结构。
CSS Grid 布局是一种二维布局系统，适合将页面划分为多个行和列组成的网格结构。它非常适合构建复杂的网页布局，比如仪表盘、卡片列表或响应式页面。以下是 Grid 布局的基础使用方法。
1. 定义网格容器
要启用 Grid 布局，先在父元素上设置 display: grid 或 display: inline-grid：
.container {
display: grid;
}
这个容器内的所有直接子元素会自动成为网格项（grid items）。
2. 设置行和列
使用 grid-template-columns 和 grid-template-rows 来定义网格的列宽和行高。
立即学习“前端免费学习笔记（深入）”；
.container {
display: grid;
grid-template-columns: 100px 200px 1fr;
grid-template-rows: 50px 100px;
}
上面代码表示：三列，宽度分别为 100px、200px 和剩余空间；两行，高度为 50px 和 100px。
fr 单位表示“可用空间的一部分”，1fr 就是一份。
3. 网格间距
使用 gap 属性设置网格项之间的间距（推荐方式）：
.container {
gap: 10px; /* 行和列的间距 */
/* 或分开写 */
row-gap: 10px;
column-gap: 20px;
}
4. 网格线与项目定位
每个网格线都有编号，从 1 开始。可以使用 grid-column 和 grid-row 控制项目跨越的位置。
.item {
grid-column: 1 / 3; /* 从第1条线开始，跨到第3条线（占两列） */
grid-row: 1 / 2; /* 占第一行 */
}
也可以用 span 表示跨越数量：
适合初学的标准三层架构，采用ajax，页面布局div+css符合w3c，用vs自带的sqlserver，免配置sqlserver，使用方便，里面共有5个项目，点击最外层的.sln直接可运行。网站采用asp.net 用户角色配置（membership，UserRoles），用户角色、权限可在asp.net配置里修改，注册，登陆均采用asp.net登陆控件，网站根据用户角色自定义sitemap，基本上
.item {
grid-column: 2 / span 2; /* 从第2列开始，跨越2列 */
}
5. 简写属性 grid-area
grid-area 可以一次性定义项目的四个边界：
.item {
grid-area: 1 / 2 / 3 / 4;
/* 意思是：row-start / col-start / row-end / col-end */
}
6. 使用命名区域布局
可以用 grid-template-areas 创建可视化布局结构：
.container {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-rows: 60px 1fr 50px;
grid-template-columns: 200px 1fr;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }
这种方式更直观，适合整体页面结构设计。
7. 自动填充与重复
使用 repeat() 函数简化重复的列或行定义：
.container {
grid-template-columns: repeat(3, 1fr); /* 三列，每列等宽 */
/* 等价于 1fr 1fr 1fr */
}
结合 auto-fit 或 auto-fill 实现响应式网格：
.container {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
这会让容器根据可用空间自动排列最小 150px 的列，并填满空间。
基本上就这些。掌握这些基础后，Grid 能帮你快速搭建灵活、响应式的布局结构。不复杂但容易忽略细节，多试几次就能熟练。
