Grid 布局是一种二维布局方式，可以将页面划分为网格，在网格中放置元素来控制页面布局。在 HTML 中，可以使用 CSS 的 display 属性将一个元素转化为 Grid 容器，并通过设置一系列的 Grid 属性来控制网格的行列和单元格的大小和位置。
下面是一个示例 HTML 页面，其中演示了如何使用 Grid 布局来实现一个简单的网格布局：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Grid Layout Example</title>
<style>
body {
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(4, 100px);
grid-gap: 10px;
}
.item {
background-color: #333;
color: #fff;
font-size: 24px;
text-align: center;
padding: 20px;
}
</style>
</head>
<body>
<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 class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">11</div>
<div class="item">12</div>
</body>
</html>在上面的示例中，使用了 display: grid 属性将整个页面设置为 Grid 容器，然后通过设置 grid-template-columns 和 grid-template-rows 属性将容器分割为三列和四行，每一列的宽度为相等的分数值，每一行的高度为固定的 100px，使用 grid-gap 属性设置行列之间的间距。Grid 容器中的每个单元格使用一个 div 元素表示，然后通过设置 grid-column 和 grid-row 属性来控制每个单元格所占的行列和大小，这里使用了默认的行和列索引，每个单元格默认占据一个网格单元格。每个单元格中包含了一个数字，使用 CSS 来设置样式。
通过调整 Grid 属性，可以实现更复杂的布局，如不同大小的单元格、单元格的合并等。
正文完