CSS网格实例[编辑 | 编辑源代码]

CSS网格布局（CSS Grid Layout）是现代网页设计中一种强大的二维布局系统，它允许开发者通过行和列的组合来构建复杂的页面结构。本教程将通过实例展示如何使用CSS网格布局，帮助初学者和高级用户掌握其核心概念和应用技巧。

简介[编辑 | 编辑源代码]

CSS网格布局是一种基于网格的布局方式，它通过定义行（rows）和列（columns）来划分页面区域。与传统的浮动（float）或弹性盒子（Flexbox）布局不同，CSS网格布局提供了更直观的控制方式，特别适合构建复杂的响应式设计。

网格布局的核心概念包括：

网格容器（Grid Container）：通过设置display: grid或display: inline-grid来创建网格容器。
网格项（Grid Items）：网格容器的直接子元素。
网格线（Grid Lines）：划分网格的行和列的线。
网格轨道（Grid Tracks）：行或列的集合。
网格单元格（Grid Cell）：行和列交叉形成的单个单元。
网格区域（Grid Area）：一个或多个网格单元格组成的矩形区域。

基本网格示例[编辑 | 编辑源代码]

以下是一个简单的网格布局示例，展示如何创建一个3行3列的网格：

.grid-container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  gap: 10px;
}

.grid-item {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  text-align: center;
  padding: 20px;
}

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
</div>

输出效果：

一个3x3的网格，每个单元格大小为100px × 100px。
单元格之间有10px的间隔（gap）。
每个单元格包含一个数字，并带有浅灰色背景和边框。

解释[编辑 | 编辑源代码]

grid-template-columns 定义了3列，每列宽度为100px。
grid-template-rows 定义了3行，每行高度为100px。
gap 设置了行和列之间的间距。

网格布局进阶示例[编辑 | 编辑源代码]

使用 fr 单位[编辑 | 编辑源代码]

fr（fraction）单位表示网格容器中的可用空间比例。以下示例展示如何使用fr创建响应式布局：

.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto;
  gap: 15px;
}

效果：

第一列和第三列各占1份空间，第二列占2份空间。
行高度自动适应内容（auto）。

网格区域命名[编辑 | 编辑源代码]

通过命名网格区域，可以更直观地定义布局结构：

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

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

效果：

顶部为标题区域（header），占据全部宽度。
左侧为侧边栏（sidebar），右侧为主内容区（content）。
底部为页脚（footer）。

实际应用案例[编辑 | 编辑源代码]

响应式图片画廊[编辑 | 编辑源代码]

以下是一个使用CSS网格布局实现的响应式图片画廊：

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}

.gallery img {
  width: 100%;
  height: auto;
  border-radius: 5px;
}

效果：

图片自动填充可用空间，每列最小宽度为200px。
在窄屏幕上显示为单列，宽屏幕上自动调整为多列。

仪表盘布局[编辑 | 编辑源代码]

仪表盘通常包含多个面板，适合用网格布局实现：

.dashboard {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: 60px 1fr;
  height: 100vh;
}

.navbar { grid-column: 1 / -1; }
.sidebar { grid-row: 2; }
.main { grid-row: 2; }

效果：

顶部导航栏（navbar）横跨全部列。
左侧为侧边栏（sidebar），右侧为主内容区（main）。
高度设置为视口高度（100vh）。

可视化网格结构[编辑 | 编辑源代码]

使用Mermaid绘制网格布局示意图：

数学公式[编辑 | 编辑源代码]

网格布局中的比例计算可以使用数学公式表示。例如，计算fr单位的空间分配：

$Column Width = \frac{Available Space \times fr Value}{Total fr Values}$

总结[编辑 | 编辑源代码]

CSS网格布局为网页设计提供了强大的二维布局能力。通过本教程的实例，您已经学习了：

如何创建基本网格结构。
使用fr单位和命名网格区域。
实现响应式图片画廊和仪表盘布局。
可视化网格结构和数学计算。

尝试在自己的项目中应用这些技术，逐步掌握CSS网格布局的高级特性！