在 HTML 里，“grid” 通常指的是 CSS 网格布局（CSS Grid Layout），它是一种强大的二维布局模型，可让你轻松创建复杂的网页布局。下面从几个关键方面来介绍它：
基本概念
-
网格容器（Grid Container） ：通过给元素设置
display: grid或者display: inline - grid，这个元素就变成了网格容器。网格容器会包含多个网格项（Grid Items）。 -
网格项（Grid Items） ：网格容器里的直接子元素就是网格项。
-
网格线（Grid Lines） ：划分网格行和列的线。这些线有编号，从 1 开始，可用于定位网格项。
-
网格轨道（Grid Tracks） ：两条相邻网格线之间的空间，包含网格行和网格列。
-
网格单元格（Grid Cell） ：由相邻的行和列网格线围成的区域，是网格布局里最小的单元。
-
网格区域（Grid Area） ：由一个或多个网格单元格组成的矩形区域。
常见属性
网格容器属性
-
display：把元素定义成网格容器。值为grid时生成块级网格容器；值为inline - grid时生成内联网格容器。 -
grid-template-columns和grid-template-rows：分别用来定义网格的列和行的轨道尺寸。例如：
.grid-container {
display: grid;
grid-template-columns: 100px 200px 1fr;
grid-template-rows: repeat(3, 100px);
}
-
grid-gap（或gap） ：设置网格轨道之间的间距，包括行间距和列间距。例如：
.grid-container {
display: grid;
gap: 10px;
}
网格项属性
-
grid-column和grid-row：指定网格项跨越的列和行的范围。例如：
.grid-item {
grid-column: 1 / 3;
grid-row: 2 / 4;
}
-
grid-area：可以用来给网格项指定一个名称，或者指定其所在的网格区域。
示例代码
以下是一个简单的 HTML 和 CSS 示例，展示了网格布局的使用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid Example</title>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 100px);
gap: 10px;
}
.grid-item {
background-color: lightblue;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<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>
</body>
</html>
在这个示例中，.grid-container 是网格容器，它被设置为有 3 列和 2 行，并且列间距和行间距都是 10px。每个 .grid-item 就是一个网格项，它们会自动填充到网格布局中。
