在 HTML 中使用 Grid 布局，需要在 CSS 中使用 display: grid 属性来定义一个 grid 容器。然后，可以使用 grid-template-columns 和 grid-template-rows 属性来定义网格中的列和行。例如，使用 grid-template-columns: repeat(3, 1fr) 可以定义一个具有 3 列的网格，每列宽度为相等的1份。
下面是一个示例代码：
<div class="grid-container">
<div class="item1">Item 1</div>
<div class="item2">Item 2</div>
<div class="item3">Item 3</div>
<div class="item4">Item 4</div>
<div class="item5">Item 5</div>
<div class="item6">Item 6</div>
</div>.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, auto);
gap: 10px;
}
.grid-container div {
background-color: #ddd;
padding: 10px;
font-size: 30px;
text-align: center;
}
.item1 {
grid-area: 1 / 1 / 3 / 3;
}在上面的代码中，我们使用 display: grid 定义了一个 grid 容器。然后，我们使用 grid-template-columns 和 grid-template-rows 定义了 3 列和 2 行的网格，每个单元格的高度和宽度由内容自动调整（即 auto）。gap 属性定义了单元格之间的间隔。
接着，我们定义了 6 个子元素，并给它们分别添加了类名。每个子元素的样式由 .grid-container div 选择器定义，包括背景颜色、内边距、字体大小和文本居中。
最后，我们使用 .item1 选择器定义了第一个子元素跨越了第一行的前两个单元格和第二行的前两个单元格，实现了合并单元格的效果。
通过这些简单的代码，我们就可以使用 Grid 布局在 HTML 中创建灵活的网格布局。