Html 如何在div中像网格一样显示图像

我正在尝试创建一个照片库应用程序。目前，我有它，直到四个图像，每个图像占据100/n%的div。当图像数量超过5个时，我希望使网格显示为：

我怎样才能做到这一点？我一直在阅读CSS网格，但它们似乎只显示了在一行中对齐图像的示例

这是我的密码：

#照片{
宽度：634px；
高度：339px；
}
.照片库{
宽度：634px；
高度：275.03px；
}
.照片库标题{
字体大小：24px；
字体大小：粗体；
线高：32px；
颜色：#333333；
边框底部：1px实心#e1e1；
填充底部：16px；
利润率：0.16px 0；
显示器：flex；
证明内容：之间的空间；
}
.照片库内容{
高度：200px；
}
.照片库布局{
列表样式：无；
填充：0；
保证金：0；
显示器：flex；
}
.照片库李{
弹性：1；
}
.照片，
.照片img{
身高：100%；
}
.照片img{
宽度：100%；
对象匹配：覆盖；
}

2张照片

使用

显示：网格

实现此目的。使用

grid

可以控制列和行的放置。将此作为参考

CSS

HTML

2张照片

---

谢谢您的回答！我有一个后续问题，你也许能回答。如果现在有9张照片（第3列总共有6张照片：第1行45张，第2行67张，第3行89张），是否有办法让项目1和项目2拍摄1.5行？目前，我必须让item-1或item-2占据两行，但我希望它们的大小相等。

#photos-gallery {
  height: 275px;
  width: 634px;
}

.photos-gallery-header {
  border-bottom: 1px solid #e1e1e1;
  color: #333;
  display: flex;
  font-size: 24px;
  font-weight: bold;
  justify-content: space-between;
  line-height: 32px;
  margin: 0 0 16px;
  padding-bottom: 16px;
}

.photos-gallery-content {
  display: grid;
  grid-template-columns: 20% 40% 20% 20%;
  grid-column-gap: 0;
  grid-row-gap: 0;
  height: 200px;
}   

.photos-gallery-content .item {
  box-shadow: inset 0 0 0 1px #000;
  overflow: hidden;
}

.photos-gallery-content .item-1 {
  grid-column-start: 1;
  grid-column-end: 1;
  grid-row-start: 1;
  grid-row-end: 1
}

.photos-gallery-content .item-2 {
  grid-column-start: 1;
  grid-column-end: 1;
  grid-row-start: 2;
  grid-row-end: 2;
}

.photos-gallery-content .item-3 {
  grid-column-start: 2;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 3;
}

<div id="photos-gallery" class="photos content-block">
  <h2 class="photos-gallery-header">2 Photos</h2>
  <div class="photos-gallery-content">
    <div class="item item-1">
      <div class="photo">
        <img src="https://i.imgur.com/8pTwPlXb.jpg"/>
      </div>
    </div>
    <div class="item item-2">
      <div class="photo">
        <img src="https://i.imgur.com/OPAR3PCb.jpg"/>
      </div>
    </div>
    <div class="item item-3">
      <div class="photo">
        <img src="https://i.imgur.com/A8eQsll.jpg"/>
      </div>
    </div>
    <div class="item item-4">
      <div class="photo">
        <img src="https://i.imgur.com/8pTwPlXb.jpg"/>
      </div>
    </div>
    <div class="item item-5">
      <div class="photo">
        <img src="https://i.imgur.com/OPAR3PCb.jpg"/>
      </div>
    </div>
    <div class="item item-6">
      <div class="photo">
        <img src="https://i.imgur.com/A8eQsll.jpg"/>
      </div>
    </div>
    <div class="item item-7">
      <div class="photo">
        <img src="https://i.imgur.com/8pTwPlXb.jpg"/>
      </div>
    </div>
  </div>
<div>