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

CSS Grid完全指南

news 2026/4/25 0:15:40

CSS Grid完全指南

引言

CSS Grid布局是现代前端开发中最强大的布局系统之一，它提供了二维网格布局能力，使得创建复杂的页面结构变得更加简单和直观。Grid布局可以轻松实现传统布局方法难以实现的设计，如复杂的响应式网格、不规则布局等。本文将深入探讨CSS Grid的核心概念、属性和最佳实践，帮助你掌握这一强大的布局工具。

Grid布局的基本概念

在使用Grid布局之前，让我们了解一些核心概念：

Grid容器（Grid Container）：应用了display: grid或display: inline-grid的元素
Grid项目（Grid Items）：Grid容器的直接子元素
Grid线（Grid Lines）：分隔网格的水平线和垂直线
Grid轨道（Grid Tracks）：两条相邻网格线之间的空间（行或列）
Grid单元格（Grid Cell）：由相邻的行和列网格线围成的最小单位
Grid区域（Grid Area）：由一个或多个Grid单元格组成的矩形区域

容器属性

1. display

定义一个Grid容器：

.container { display: grid; /* 块级Grid容器 */ /* 或 */ display: inline-grid; /* 内联Grid容器 */ }

2. grid-template-columns 和 grid-template-rows

定义网格的列和行：

.container { /* 定义3列，宽度分别为100px、200px和1fr */ grid-template-columns: 100px 200px 1fr; /* 定义2行，高度分别为50px和200px */ grid-template-rows: 50px 200px; /* 使用repeat()函数 */ grid-template-columns: repeat(3, 1fr); /* 3列，每列1fr */ /* 使用minmax()函数 */ grid-template-columns: repeat(3, minmax(100px, 1fr)); /* 3列，每列最小100px，最大1fr */ /* 使用auto-fill和auto-fit */ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* 自动填充，每列最小200px */ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* 自动适应，每列最小200px */ }

3. grid-template-areas

定义网格区域：

.container { grid-template-areas: "header header header" "sidebar content content" "footer footer footer"; grid-template-columns: 200px 1fr 1fr; grid-template-rows: auto 1fr auto; } .header { grid-area: header; } .sidebar { grid-area: sidebar; } .content { grid-area: content; } .footer { grid-area: footer; }

4. grid-template

grid-template-rows、grid-template-columns和grid-template-areas的简写：

.container { grid-template: "header header header" auto "sidebar content content" 1fr "footer footer footer" auto / 200px 1fr 1fr; }

5. gap

定义网格项目之间的间距：

.container { /* 行和列间距都是20px */ gap: 20px; /* 行间距10px，列间距20px */ gap: 10px 20px; /* 旧语法 */ grid-row-gap: 10px; grid-column-gap: 20px; }

6. justify-items

定义Grid项目在单元格内的水平对齐方式：

.container { justify-items: stretch; /* 默认，拉伸以填充单元格 */ /* 或 */ justify-items: start; /* 左对齐 */ /* 或 */ justify-items: end; /* 右对齐 */ /* 或 */ justify-items: center; /* 居中对齐 */ }

7. align-items

定义Grid项目在单元格内的垂直对齐方式：

.container { align-items: stretch; /* 默认，拉伸以填充单元格 */ /* 或 */ align-items: start; /* 顶部对齐 */ /* 或 */ align-items: end; /* 底部对齐 */ /* 或 */ align-items: center; /* 居中对齐 */ /* 或 */ align-items: baseline; /* 以基线对齐 */ }

8. place-items

justify-items和align-items的简写：

.container { place-items: center; /* 水平和垂直都居中 */ /* 或 */ place-items: start end; /* 水平开始，垂直结束 */ }

9. justify-content

定义Grid容器内网格的水平对齐方式：

.container { justify-content: stretch; /* 默认，拉伸以填充容器 */ /* 或 */ justify-content: start; /* 左对齐 */ /* 或 */ justify-content: end; /* 右对齐 */ /* 或 */ justify-content: center; /* 居中对齐 */ /* 或 */ justify-content: space-between; /* 两端对齐，项目之间的间隔相等 */ /* 或 */ justify-content: space-around; /* 每个项目两侧的间隔相等 */ /* 或 */ justify-content: space-evenly; /* 项目之间的间隔相等 */ }

10. align-content

定义Grid容器内网格的垂直对齐方式：

.container { align-content: stretch; /* 默认，拉伸以填充容器 */ /* 或 */ align-content: start; /* 顶部对齐 */ /* 或 */ align-content: end; /* 底部对齐 */ /* 或 */ align-content: center; /* 居中对齐 */ /* 或 */ align-content: space-between; /* 两端对齐，线之间的间隔相等 */ /* 或 */ align-content: space-around; /* 每根线两侧的间隔相等 */ }

11. place-content

justify-content和align-content的简写：

.container { place-content: center; /* 水平和垂直都居中 */ /* 或 */ place-content: start end; /* 水平开始，垂直结束 */ }

12. grid-auto-columns 和 grid-auto-rows

定义自动生成的网格轨道大小：

.container { grid-auto-columns: 100px; /* 自动生成的列宽100px */ grid-auto-rows: 50px; /* 自动生成的行高50px */ }

13. grid-auto-flow

定义自动放置项目的方式：

.container { grid-auto-flow: row; /* 默认，按行填充 */ /* 或 */ grid-auto-flow: column; /* 按列填充 */ /* 或 */ grid-auto-flow: row dense; /* 按行填充，密集模式 */ /* 或 */ grid-auto-flow: column dense; /* 按列填充，密集模式 */ }

14. grid

所有Grid容器属性的简写：

.container { grid: "header header header" auto "sidebar content content" 1fr "footer footer footer" auto / 200px 1fr 1fr; gap: 20px; }

项目属性

1. grid-column-start, grid-column-end, grid-row-start, grid-row-end

定义Grid项目的位置：

.item { /* 从第1列线开始，到第3列线结束 */ grid-column-start: 1; grid-column-end: 3; /* 从第2行线开始，到第4行线结束 */ grid-row-start: 2; grid-row-end: 4; /* 使用span关键字 */ grid-column-start: 1; grid-column-end: span 2; /* 跨越2列 */ grid-row-start: 2; grid-row-end: span 2; /* 跨越2行 */ /* 使用简写 */ grid-column: 1 / 3; /* 等同于 grid-column-start: 1; grid-column-end: 3; */ grid-row: 2 / 4; /* 等同于 grid-row-start: 2; grid-row-end: 4; */ /* 使用span关键字的简写 */ grid-column: 1 / span 2; /* 等同于 grid-column-start: 1; grid-column-end: span 2; */ grid-row: 2 / span 2; /* 等同于 grid-row-start: 2; grid-row-end: span 2; */ }

2. grid-area

定义Grid项目的区域：

.item { grid-area: header; /* 使用命名区域 */ /* 或 */ grid-area: 1 / 1 / 2 / 4; /* 行开始 / 列开始 / 行结束 / 列结束 */ }

3. justify-self

定义单个Grid项目在单元格内的水平对齐方式：

.item { justify-self: stretch; /* 默认，拉伸以填充单元格 */ /* 或 */ justify-self: start; /* 左对齐 */ /* 或 */ justify-self: end; /* 右对齐 */ /* 或 */ justify-self: center; /* 居中对齐 */ }

4. align-self

定义单个Grid项目在单元格内的垂直对齐方式：

.item { align-self: stretch; /* 默认，拉伸以填充单元格 */ /* 或 */ align-self: start; /* 顶部对齐 */ /* 或 */ align-self: end; /* 底部对齐 */ /* 或 */ align-self: center; /* 居中对齐 */ /* 或 */ align-self: baseline; /* 以基线对齐 */ }

5. place-self

justify-self和align-self的简写：

.item { place-self: center; /* 水平和垂直都居中 */ /* 或 */ place-self: start end; /* 水平开始，垂直结束 */ }

实战应用

1. 响应式网格布局

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; padding: 20px; } .grid-item { background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); padding: 20px; } .grid-item h3 { margin-top: 0; margin-bottom: 10px; font-size: 18px; font-weight: bold; } .grid-item p { margin-bottom: 15px; line-height: 1.5; color: #666; } @media (max-width: 768px) { .grid { grid-template-columns: 1fr; } }

2. 复杂布局

.complex-layout { display: grid; grid-template-areas: "header header header" "sidebar content ads" "footer footer footer"; grid-template-columns: 200px 1fr 200px; grid-template-rows: auto 1fr auto; gap: 20px; min-height: 100vh; padding: 20px; box-sizing: border-box; } .header { grid-area: header; background: #333; color: #fff; padding: 20px; border-radius: 8px; } .sidebar { grid-area: sidebar; background: #f0f0f0; padding: 20px; border-radius: 8px; } .content { grid-area: content; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .ads { grid-area: ads; background: #f0f0f0; padding: 20px; border-radius: 8px; } .footer { grid-area: footer; background: #333; color: #fff; padding: 20px; border-radius: 8px; text-align: center; } @media (max-width: 1024px) { .complex-layout { grid-template-areas: "header header" "sidebar content" "ads ads" "footer footer"; grid-template-columns: 200px 1fr; } } @media (max-width: 768px) { .complex-layout { grid-template-areas: "header" "sidebar" "content" "ads" "footer"; grid-template-columns: 1fr; } }

3. 图片画廊

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); grid-auto-rows: 200px; gap: 10px; padding: 20px; } .gallery-item { position: relative; overflow: hidden; border-radius: 8px; } .gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .gallery-item:hover img { transform: scale(1.1); } .gallery-item:nth-child(3n+1) { grid-row: span 2; grid-column: span 2; } @media (max-width: 768px) { .gallery-item:nth-child(3n+1) { grid-row: span 1; grid-column: span 1; } }

4. 导航栏布局

.navbar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; padding: 10px 20px; background: #333; color: #fff; } .navbar-logo { font-size: 20px; font-weight: bold; } .navbar-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, auto)); gap: 20px; justify-content: center; } .navbar-link { color: #fff; text-decoration: none; padding: 5px 10px; border-radius: 4px; transition: background 0.3s ease; text-align: center; } .navbar-link:hover { background: rgba(255, 255, 255, 0.1); } .navbar-actions { display: grid; grid-template-columns: auto auto; gap: 10px; } @media (max-width: 768px) { .navbar { grid-template-columns: 1fr; gap: 10px; } .navbar-links { grid-template-columns: repeat(auto-fit, minmax(80px, auto)); } .navbar-actions { justify-content: center; } }

5. 表单布局

.form { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; max-width: 800px; margin: 0 auto; padding: 20px; background: #f9f9f9; border-radius: 8px; } .form-group { display: grid; gap: 5px; } .form-label { font-weight: bold; color: #333; } .form-input { padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 16px; } .form-input:focus { border-color: #007bff; outline: none; box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); } .form-button { grid-column: 1 / -1; padding: 12px; background: #007bff; color: #fff; border: none; border-radius: 4px; font-size: 16px; cursor: pointer; transition: background 0.3s ease; } .form-button:hover { background: #0069d9; }

高级技巧

1. 嵌套网格

在Grid项目中嵌套另一个Grid：

.outer-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 20px; padding: 20px; } .inner-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .inner-item { background: #f0f0f0; padding: 10px; border-radius: 4px; }

2. 使用grid-auto-flow: dense

使用密集模式填充网格中的空白区域：

.grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100px; grid-auto-flow: dense; gap: 10px; padding: 20px; } .item { background: #f0f0f0; padding: 20px; border-radius: 4px; } .item:nth-child(3n+1) { grid-row: span 2; grid-column: span 2; } .item:nth-child(4n) { grid-row: span 2; }

3. 使用命名网格线

为网格线命名，使代码更具可读性：

.container { display: grid; grid-template-columns: [sidebar-start] 200px [sidebar-end content-start] 1fr [content-end]; grid-template-rows: [header-start] auto [header-end main-start] 1fr [main-end footer-start] auto [footer-end]; gap: 20px; min-height: 100vh; } .header { grid-column: sidebar-start / content-end; grid-row: header-start / header-end; } .sidebar { grid-column: sidebar-start / sidebar-end; grid-row: main-start / main-end; } .content { grid-column: content-start / content-end; grid-row: main-start / main-end; } .footer { grid-column: sidebar-start / content-end; grid-row: footer-start / footer-end; }