用HTML和CSS写一个十六宫格的图片布局

好的，请看以下代码示例：

HTML代码：

<div class="grid">
  <div class="grid-item"><img src="image1.jpg"></div>
  <div class="grid-item"><img src="image2.jpg"></div>
  <div class="grid-item"><img src="image3.jpg"></div>
  <div class="grid-item"><img src="image4.jpg"></div>
  <div class="grid-item"><img src="image5.jpg"></div>
  <div class="grid-item"><img src="image6.jpg"></div>
  <div class="grid-item"><img src="image7.jpg"></div>
  <div class="grid-item"><img src="image8.jpg"></div>
  <div class="grid-item"><img src="image9.jpg"></div>
  <div class="grid-item"><img src="image10.jpg"></div>
  <div class="grid-item"><img src="image11.jpg"></div>
  <div class="grid-item"><img src="image12.jpg"></div>
  <div class="grid-item"><img src="image13.jpg"></div>
  <div class="grid-item"><img src="image14.jpg"></div>
  <div class="grid-item"><img src="image15.jpg"></div>
  <div class="grid-item"><img src="image16.jpg"></div>
</div>

CSS代码：

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
}

.grid-item {
  border: 1px solid #ccc;
  padding: 10px;
  text-align: center;
}

这个代码会生成一个4x4的图片布局，每个图片都会有一个1像素的边框和10像素的填充。你可以根据需要修改这些值。