Appearance
第3章：Grid布局核心术语
在本节中，我们将介绍Grid布局的核心术语，这些术语是理解和使用Grid布局的基础。
3.1 容器（Grid Container）
容器是开启Grid布局的父元素，通过设置display: grid或display: inline-grid来开启Grid布局。
代码示例
html
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<style>
.container {
display: grid; /* 开启Grid布局 */
}
</style>3.2 项目（Grid Item）
项目是Grid容器内的子元素，会自动成为Grid项目。
注意事项
- 只有直接子元素才是Grid项目
- 子元素的子元素不是Grid项目，除非它们的父元素也被设置为Grid容器
3.3 网格线（Grid Line）
网格线是划分网格的横线和竖线，包括行网格线和列网格线。
行网格线
- 水平方向的网格线
- 用于划分行轨道
列网格线
- 垂直方向的网格线
- 用于划分列轨道
网格线编号
- 从1开始编号
- 可以使用负数表示从末尾开始计数
3.4 网格轨道（Grid Track）
网格轨道是两条相邻网格线之间的区域，包括行轨道和列轨道。
行轨道
- 水平方向的轨道
- 对应行高
列轨道
- 垂直方向的轨道
- 对应列宽
3.5 网格单元格（Grid Cell）
网格单元格是行轨道与列轨道交叉形成的最小区域，类似于表格单元格。
特点
- 是Grid布局中最小的单位
- 每个单元格可以包含一个Grid项目
3.6 网格区域（Grid Area）
网格区域是多个网格单元格合并形成的区域。
特点
- 可以包含多个Grid项目
- 可以通过
grid-template-areas属性命名
3.7 核心术语实操验证
让我们通过一个简单的代码示例来可视化理解这些核心术语。
代码示例
html
<!DOCTYPE html>
<html>
<head>
<title>Grid布局核心术语</title>
<style>
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 50px 50px;
gap: 10px;
border: 2px solid #333;
padding: 10px;
}
.item {
background-color: #3498db;
color: white;
display: flex;
justify-content: center;
align-items: center;
border-radius: 4px;
}
</style>
</head>
<body>
<h1>Grid布局核心术语</h1>
<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>
<p><strong>容器</strong>：整个带有边框的区域</p>
<p><strong>项目</strong>：6个蓝色的方块</p>
<p><strong>网格线</strong>：划分网格的线条（包括边框）</p>
<p><strong>网格轨道</strong>：两条相邻网格线之间的区域</p>
<p><strong>网格单元格</strong>：每个蓝色方块所在的区域</p>
<p><strong>网格区域</strong>：多个网格单元格合并形成的区域</p>
</body>
</html>实操练习
- 创建一个Grid布局，包含3列2行
- 标识出所有的网格线、网格轨道和网格单元格
- 尝试合并几个网格单元格形成一个网格区域
- 观察网格线的编号规则
通过本节的学习，你已经了解了Grid布局的核心术语。这些术语是理解和使用Grid布局的基础，掌握它们将帮助你更加熟练地使用Grid布局。