css网格布局Grid
一、网格布局适应场景
当涉及到的布局是二维布局（元素不止一行或者一列）且比较复杂的时候，可以用网格布局，看下面的一个例子：
上图上一个四行三列的网格，布局相对比较复杂。如果你用别的布局方案，例如：绝对定位，flex，float等等，实现起来都很麻烦，但是你用了网格布局，情况就好多了。文章最后会附上上面示例的代码。
二、关键属性详解
1. 容器属性
| 属性 | 作用 | 示例 |
|---|---|---|
display: grid | 启用网格布局 | .container { display: grid; } |
grid-template-columns | 定义列的轨道大小（支持固定值、百分比、fr 单位、minmax() 等） | grid-template-columns: 100px 1fr 2fr; |
grid-template-rows | 定义行的轨道大小 | grid-template-rows: repeat(3, 100px); |
gap | 设置行和列的间距（兼容旧版需用 grid-row-gap 和 grid-column-gap） | .container { gap: 10px; } |
grid-template-areas | 通过命名区域定义布局 | grid-template-areas: "header header" "sidebar main"; |
grid-auto-flow | 控制自动放置算法（row/column/dense） | grid-auto-flow: column dense; |
2. 网格项属性
| 属性 | 作用 | 示例 |
|---|---|---|
grid-column | 定义网格项的列范围（起始线/结束线或 span 跨度） | grid-column: 2 / span 3;（从第2列跨越3列） |
grid-row | 定义网格项的行范围 | grid-row: 1 / 3;（从第1行跨越2行） |
grid-area | 简写属性，合并 grid-row 和 grid-column，或直接引用命名区域 | grid-area: header;（分配到命名区域） |
justify-self | 控制网格项在单元格内的水平对齐方式 | justify-self: end; |
align-self | 控制网格项在单元格内的垂直对齐方式 | align-self: center; |
三、常见布局场景
1. 基础网格
.container {display: grid;grid-template-columns: repeat(3, 1fr); /* 3列等宽 */grid-template-rows: repeat(2, 100px); /* 2行，每行100px */gap: 10px;}效果：3列×2行的网格，所有单元格大小相同。
2. 跨行/跨列
.item-span {
grid-column: 2 / 4; /* 跨越第2、3列 */
grid-row: 1 / 3; /* 跨越第1、2行 */
}效果：一个网格项占据2行×2列的区域。
3. 命名网格区域
.container {
display: grid;
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
}.header { grid-area: header; }
.sidebar { grid-area: sidebar; }效果：通过名称直观分配布局区域。
4. 响应式网格
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}效果：自动填充容器宽度，每列最小200px，剩余空间均分。
四、与 Flexbox 的对比
| 特性 | Grid Layout | Flexbox |
|---|---|---|
| 维度 | 二维布局（行+列） | 一维布局（行或列） |
| 适用场景 | 复杂页面结构（如仪表盘、表格） | 一维布局（如导航栏、卡片组） |
| 对齐控制 | 支持单元格内和单元格间的对齐 | 仅支持容器内子项的对齐 |
| 嵌套复杂度 | 减少嵌套，直接定义二维结构 | 可能需要多层嵌套实现复杂布局 |
五、第一部分示例代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}.container {width: 80%;height: 60vh;background-color: pink;padding: 2px;display: grid;row-gap: 2px;column-gap:5px;grid-template-columns: repeat(3, 1fr);grid-template-rows: repeat(4, 1fr)}.item {border: 1px solid #000;}.one {background-color: blue;grid-column: 2 / span 2;}.two {background-color: red;grid-column: 3;grid-row: 2 / span 2;}.three {background-color: green;grid-column: 1 / span 2;grid-row: 1 / span 2;}</style>
</head>
<body><div class="container"><div class="item three">1</div><!-- <div class="item">2</div> --><div class="item">3</div><!-- <div class="item">4</div> --><!-- <div class="item">5</div> --><div class="item two">6</div><div class="item">7</div><div class="item">8</div><!-- <div class="item">9</div> --><div class="item">10</div><div class="item one">11</div><!-- <div class="item">12</div> --></div>
</body>
</html>