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. 基础网格

css 复制代码

.container {

display: grid;

grid-template-columns: repeat(3, 1fr); /* 3列等宽 */

grid-template-rows: repeat(2, 100px); /* 2行，每行100px */

gap: 10px;

}

效果：3列×2行的网格，所有单元格大小相同。

2. 跨行/跨列

css 复制代码

.item-span {
grid-column: 2 / 4; /* 跨越第2、3列 */
grid-row: 1 / 3; /* 跨越第1、2行 */
}

效果：一个网格项占据2行×2列的区域。

3. 命名网格区域

css 复制代码

.container {
display: grid;
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
}


.header { grid-area: header; }
.sidebar { grid-area: sidebar; }

效果：通过名称直观分配布局区域。

4. 响应式网格

css 复制代码

.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

效果：自动填充容器宽度，每列最小200px，剩余空间均分。

四、与 Flexbox 的对比

特性	Grid Layout	Flexbox
维度	二维布局（行+列）	一维布局（行或列）
适用场景	复杂页面结构（如仪表盘、表格）	一维布局（如导航栏、卡片组）
对齐控制	支持单元格内和单元格间的对齐	仅支持容器内子项的对齐
嵌套复杂度	减少嵌套，直接定义二维结构	可能需要多层嵌套实现复杂布局

五、第一部分示例代码

html 复制代码

<!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>