网格布局是一种二维的布局方式，可以将一个元素的空间分割为行和列，从而实现更灵活的布局和排列方式。在 HTML 中，可以使用 CSS 的 display 属性将一个元素转化为网格容器，并通过设置一系列的网格属性来控制网格的行列和单元格的大小和位置。
下面是一个示例 HTML 页面，其中演示了如何使用网格布局来实现一个简单的图片墙：
<!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-gap: 10px;
}
.item {
background-color: #333;
color: #fff;
font-size: 24px;
text-align: center;
padding: 20px;
}
.item img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<div class="item"><img src="https://picsum.photos/300/300" alt="Image 1"></div>
<div class="item"><img src="https://picsum.photos/300/300" alt="Image 2"></div>
<div class="item"><img src="https://picsum.photos/300/300" alt="Image 3"></div>
<div class="item"><img src="https://picsum.photos/300/300" alt="Image 4"></div>
<div class="item"><img src="https://picsum.photos/300/300" alt="Image 5"></div>
<div class="item"><img src="https://picsum.photos/300/300" alt="Image 6"></div>
</body>
</html>在上面的示例中，使用了 display: grid 属性将整个页面设置为网格容器，然后通过设置 grid-template-columns 属性将容器分割为三列，每一列的宽度为相等的分数值，使用 grid-gap 属性设置行列之间的间距。网格容器中的每个单元格使用一个 div 元素表示，然后通过设置 grid-column 和 grid-row 属性来控制每个单元格所占的行列和大小，这里使用了默认的行和列索引，每个单元格默认占据一个网格单元格。每个单元格中包含了一张图片和一些文本内容，使用 CSS 来设置样式。注意：上面示例中的图片url请换成自己的图片路径
正文完