只用HTML+CSS来实现

只用HTML和CSS来实现，你可以创建一个基本的响应式图像网格，其中每个单元格包含三张图片。以下是一个例子：

HTML部分：

<div class="grid-container">
  <div class="grid-item">
    <div class="image-container">
      <img src="image1.jpg" alt="Image 1">
      <img src="image2.jpg" alt="Image 2">
      <img src="image3.jpg" alt="Image 3">
    </div>
  </div>
  <!-- 可以复制这个结构并调整索引来添加更多单元格 -->
</div>

CSS部分：

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

.grid-item {
  padding: 10px;
}

.image-container {
  display: flex;
  flex-wrap: wrap;
}

.image-container img {
  width: 100%;
  height: auto;
  max-width: 80%; /* 调整此值以控制图片大小 */
  margin-bottom: 5px;
  cursor: pointer;
}

/* 当鼠标悬停在图片上时改变背景色 */
.image-container img:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

在这个例子中，我们使用了CSS Grid布局来自动创建等宽的列，并且让图片适应容器宽度。当屏幕变窄时，列数会自适应减少。