当前位置：首页 > news >正文

深入掌握CSS Grid布局：每个属性详解与实战示例

news 2025/7/26 9:21:21

CSS Grid布局是前端开发者的“布局神器”，能让你轻松搞定复杂的网页排版。想从零基础到熟练运用Grid？别急，这篇文章会带你逐一拆解Grid的每个核心属性，配上直观的代码示例和效果分析，确保你不仅看懂，还能自己写出来！无论你是新手还是想进阶，这篇指南都帮你打牢基础，学会用Grid玩转布局！🚀
在这里插入图片描述

1. 为什么要学CSS Grid？

Grid是CSS提供的一种二维布局系统，比Flexbox更强大，因为它能同时控制行和列。它的优势有：

超级灵活：想让元素跨行跨列？Grid轻松搞定。
响应式简单：配合媒体查询，几行代码适配各种屏幕。
代码量少：复杂的布局用Grid实现，CSS代码量大大减少。
浏览器支持好：主流浏览器（Chrome、Firefox、Safari、Edge）都完美支持，IE11也能部分兼容。

接下来，我们直接上手，从核心概念到每个属性的用法，带你一步步玩转Grid！

2. Grid布局的基础概念

在写代码之前，先搞清楚几个基本术语，方便后面理解属性：

网格容器（Grid Container）：设置display: grid的元素，包含所有网格内容。
网格项目（Grid Item）：容器内的直接子元素，自动成为网格的一部分。
网格线（Grid Line）：网格的水平和垂直分隔线，编号从1开始。
网格轨道（Grid Track）：网格线之间的行或列空间。
网格单元（Grid Cell）：单个格子，由相邻网格线围成。
网格区域（Grid Area）：多行多列组成的矩形区域。

3. 动手实践：搭建一个简单Grid

我们先来写一个2×3的网格，感受一下Grid的基本用法。

HTML

<div class="container"><div class="item">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">6</div>
</div>

CSS

.container {display: grid;grid-template-columns: 150px 150px 150px; /* 3列，每列150px */grid-template-rows: 100px 100px; /* 2行，每行100px */gap: 10px; /* 网格间距10px */
}.item {background-color: #e6f3ff;display: flex;align-items: center;justify-content: center;border: 1px solid #007bff;font-size: 18px;
}

效果

运行后，你会得到一个2行3列的网格，每个格子150×100px，格子间有10px间距。每个格子背景是浅蓝色，带边框，内容居中显示。

4. 核心属性逐一拆解

下面我们来详细讲解Grid的每个核心属性，配上独立示例，帮你彻底搞懂怎么用！

（1）`display: grid` 和 `display: inline-grid`

作用：将元素设置为网格容器。
区别：
- display: grid：容器是块级元素，独占一行。
- display: inline-grid：容器是行内块元素，允许其他内容在同一行。

示例：比较`grid`和`inline-grid`

<div class="container grid">网格容器</div>
<div class="container inline-grid">行内网格</div>
<span>其他内容</span>

.grid {display: grid;grid-template-columns: 100px 100px;background-color: #f0f0f0;
}
.inline-grid {display: inline-grid;grid-template-columns: 100px 100px;background-color: #e6f3ff;
}

效果：grid容器独占一行，inline-grid容器和旁边的<span>在同一行。

（2）`grid-template-columns` 和 `grid-template-rows`

作用：定义网格的列和行数量及大小。
用法：可以指定固定值（如100px）、百分比（如50%）、fr单位（剩余空间比例）或auto（内容自适应）。

示例：不同单位组合

<div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div>
</div>

.container {display: grid;grid-template-columns: 100px 1fr 2fr; /* 第1列100px，第2列1份，第3列2份 */grid-template-rows: 50px auto; /* 第1行50px，第2行自适应 */gap: 10px;
}

效果：

第1列固定100px，第2列和第3列按1:2分配剩余宽度。
第1行固定50px，第2行根据内容自动调整高度。

进阶用法：用repeat()简化重复值：

grid-template-columns: repeat(3, 1fr); /* 等价于 1fr 1fr 1fr */
grid-template-columns: repeat(2, 100px 50px); /* 等价于 100px 50px 100px 50px */

（3）`gap`、`row-gap` 和 `column-gap`

作用：设置网格项目之间的间距。
用法：
- gap: 10px：行和列间距都是10px。
- row-gap: 10px：仅设置行间距。
- column-gap: 10px：仅设置列间距。

示例：不同间距效果

<div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div>
</div>

.container {display: grid;grid-template-columns: repeat(2, 1fr);row-gap: 20px; /* 行间距20px */column-gap: 10px; /* 列间距10px */
}

效果：格子之间水平间距10px，垂直间距20px。

（4）`grid-template-areas`

作用：用命名区域定义网格布局，适合快速规划页面结构。
用法：在容器中定义区域名称，子元素通过grid-area指定区域。

示例：页面布局

<div class="container"><header class="item">Header</header><aside class="item">Sidebar</aside><main class="item">Main</main><footer class="item">Footer</footer>
</div>

.container {display: grid;grid-template-columns: 200px 1fr;grid-template-rows: 100px 1fr 100px;grid-template-areas:"header header""sidebar main""footer footer";gap: 10px;
}header { grid-area: header; }
aside { grid-area: sidebar; }
main { grid-area: main; }
footer { grid-area: footer; }.item {background-color: #f0f0f0;padding: 20px;
}

效果：Header和Footer跨两列，Sidebar和Main并排，布局清晰直观。

（5）`grid-column` 和 `grid-row`

作用：指定网格项目占据的网格线范围。
用法：
- grid-column: 起始线 / 结束线（或span 跨度）。
- grid-row: 起始线 / 结束线（或span 跨度）。

示例：跨行跨列

<div class="container"><div class="item item1">跨2列</div><div class="item">2</div><div class="item">3</div><div class="item">4</div>
</div>

.container {display: grid;grid-template-columns: repeat(3, 1fr);grid-template-rows: repeat(2, 100px);gap: 10px;
}.item1 {grid-column: 1 / 3; /* 从第1列线到第3列线，跨2列 */grid-row: 1 / span 2; /* 从第1行线开始，跨2行 */
}

效果：第一个格子横跨2列、纵跨2行，其他格子自动填充剩余位置。

（6）`grid-auto-columns` 和 `grid-auto-rows`

作用：为隐式网格（未明确定义的行或列）设置默认大小。
用法：当网格项目超出grid-template定义的范围时，自动生成行或列。

示例：自动扩展网格

<div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div>
</div>

.container {display: grid;grid-template-columns: repeat(2, 100px); /* 明确2列 */grid-auto-rows: 80px; /* 隐式行高80px */
}

效果：4个项目会形成2×2网格，超出2列的部分自动按80px行高排列。

（7）`grid-auto-flow`

作用：控制网格项目的排列方向。
取值：
- row（默认）：按行填充。
- column：按列填充。
- dense：尽可能填充空隙。

示例：密集填充

<div class="container"><div class="item item1">跨2列</div><div class="item">2</div><div class="item">3</div>
</div>

.container {display: grid;grid-template-columns: repeat(3, 1fr);grid-auto-flow: dense;gap: 10px;
}.item1 {grid-column: span 2;
}

效果：dense模式会让后续项目尽量填满前面的空隙，布局更紧凑。

（8）`justify-items` 和 `align-items`

作用：
- justify-items：控制网格项目在列轴（水平）的对齐。
- align-items：控制网格项目在行轴（垂直）的对齐。
取值：start、center、end、stretch（默认）。

示例：居中对齐

<div class="container"><div class="item">1</div><div class="item">2</div>
</div>

.container {display: grid;grid-template-columns: repeat(2, 200px);justify-items: center; /* 水平居中 */align-items: center; /* 垂直居中 */gap: 10px;
}

效果：每个格子内容水平和垂直居中显示。

（9）`justify-content` 和 `align-content`

作用：
- justify-content：控制整个网格在容器水平方向的对齐。
- align-content：控制整个网格在容器垂直方向的对齐。
取值：start、center、end、space-between、space-around、space-evenly。

示例：网格整体居中

<div class="container"><div class="item">1</div><div class="item">2</div>
</div>

.container {display: grid;grid-template-columns: repeat(2, 100px);justify-content: center; /* 网格整体水平居中 */align-content: center; /* 网格整体垂直居中 */height: 300px; /* 容器高度 */gap: 10px;
}

效果：整个2×1网格在容器中水平和垂直居中。

（10）`minmax()`、`auto-fill` 和 `auto-fit`

作用：
- minmax(min, max)：设置轨道的最小和最大尺寸。
- auto-fill：根据容器宽度填充尽可能多的轨道。
- auto-fit：填充轨道并扩展以填满容器。

示例：自适应网格

<div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div>
</div>

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

效果：每列最小100px，容器宽度够时扩展为等宽列，不够时自动换行。

5. 实战案例：响应式图片画廊

我们用Grid实现一个响应式图片画廊，桌面端3列，平板2列，手机1列。

HTML

<div class="gallery"><div class="card">图片1</div><div class="card">图片2</div><div class="card">图片3</div><div class="card">图片4</div>
</div>

CSS

.gallery {display: grid;grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));gap: 20px;padding: 20px;
}.card {background-color: #fff;border: 1px solid #ddd;padding: 20px;text-align: center;font-size: 16px;
}/* 平板 */
@media (max-width: 768px) {.gallery {grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));}
}/* 手机 */
@media (max-width: 480px) {.gallery {grid-template-columns: 1fr;}
}