十张大小不同照片的gird布局代码

以下是十张大小不同照片的grid布局代码的示例：

<div class="grid-container">
  <div class="grid-item item1">
    <img src="photo1.jpg">
  </div>
  <div class="grid-item item2">
    <img src="photo2.jpg">
  </div>
  <div class="grid-item item3">
    <img src="photo3.jpg">
  </div>
  <div class="grid-item item4">
    <img src="photo4.jpg">
  </div>
  <div class="grid-item item5">
    <img src="photo5.jpg">
  </div>
  <div class="grid-item item6">
    <img src="photo6.jpg">
  </div>
  <div class="grid-item item7">
    <img src="photo7.jpg">
  </div>
  <div class="grid-item item8">
    <img src="photo8.jpg">
  </div>
  <div class="grid-item item9">
    <img src="photo9.jpg">
  </div>
  <div class="grid-item item10">
    <img src="photo10.jpg">
  </div>
</div>

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

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

.item1 {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}

.item2 {
  grid-column: 3 / 5;
  grid-row: 1 / 2;
}

.item3 {
  grid-column: 3 / 4;
  grid-row: 2 / 4;
}

.item4 {
  grid-column: 4 / 5;
  grid-row: 2 / 4;
}

.item5 {
  grid-column: 1 / 2;
  grid-row: 3 / 4;
}

.item6 {
  grid-column: 2 / 4;
  grid-row: 3 / 4;
}

.item7 {
  grid-column: 4 / 5;
  grid-row: 3 / 4;
}

.item8 {
  grid-column: 1 / 3;
  grid-row: 4 / 5;
}

.item9 {
  grid-column: 3 / 4;
  grid-row: 4 / 5;
}

.item10 {
  grid-column: 4 / 5;
  grid-row: 4 / 5;
}

img {
  max-width: 100%;
  height: auto;
}

在此示例中，我们使用了一个grid容器来创建网格布局，并使用grid-template-columns属性设置了每个列的宽度。我们还使用grid-gap属性设置了每个项目之间的间距。

每个项目都有一个类名，我们使用grid-column和grid-row属性来指定它们在网格中的位置。在CSS中，我们还为项目添加了一些样式，例如边框、内边距和居中文本。我们还为图像添加了一些CSS样式，以确保它们在不同大小的容器中正确缩放。

这是一个基本示例，您可以根据自己的需要进行更改和定制。