HTML5簡(jiǎn)易照片墻代碼如下：
<!DOCTYPE html>
<html>
<head>
<title>照片墻</title>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
padding: 10px;
background-color: #f2f2f2;
}
.grid-item {
background-color: #DDD;
border: 1px solid #afafaf;
border-radius: 5px;
padding: 10px;
font-size: 30px;
text-align: center;
font-weight: bold;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item"><img src="photo1.jpg"></div>
<div class="grid-item"><img src="photo2.jpg"></div>
<div class="grid-item"><img src="photo3.jpg"></div>
<div class="grid-item"><img src="photo4.jpg"></div>
<div class="grid-item"><img src="photo5.jpg"></div>
<div class="grid-item"><img src="photo6.jpg"></div>
</div>
</body>
</html>上述代碼中，我們使用了CSS Grid布局實(shí)現(xiàn)了一個(gè)照片墻布局，其中.grid-container是整個(gè)布局的容器，grid-template-columns定義了三列，每列的寬度都是fr，即可自適應(yīng)寬度，grid-gap定義了網(wǎng)格之間的間距，padding定義了整個(gè)容器的內(nèi)邊距。
grid-item是每個(gè)照片的容器類(lèi)，我們?cè)O(shè)置了背景色、邊框以及圓角、內(nèi)邊距等樣式并使用了display: grid屬性讓其內(nèi)部元素（也就是圖片）也是以網(wǎng)格布局方式顯示的。最后，我們?cè)诿總€(gè)grid-item中加入了一張照片。