十张照片的gird布局代码

以下是十张照片的grid布局代码：

HTML代码：

<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 class="grid-item"><img src="photo7.jpg"></div>
  <div class="grid-item"><img src="photo8.jpg"></div>
  <div class="grid-item"><img src="photo9.jpg"></div>
  <div class="grid-item"><img src="photo10.jpg"></div>
</div>

CSS代码：

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

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

.grid-item img {
  max-width: 100%;
}

这个代码将十张照片放在一个网格容器中，每行有五张照片。网格容器使用`display: grid;`来定义它是一个网格布局。`grid-template-columns: repeat(5, 1fr);`定义了每行有五个等宽的网格。`grid-gap: 10px;`定义了每个网格之间的间距。每个网格元素用`.grid-item`类来定义，其中添加了一些基本的样式，如边框、内边距和居中对齐。图片使用`max-width: 100%;`来确保它们不会超出网格元素的边界。