css多行多列图片，鼠标经过图片会放大

你可以使用CSS的Grid布局和transform属性来实现多行多列图片，并且在鼠标经过图片时对其进行放大。以下是一个示例代码：

HTML代码：

<div class="grid-container">
  <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>

CSS代码：

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

.grid-item {
  position: relative;
  overflow: hidden;
}

.grid-item img {
  width: 100%;
  height: auto;
  transition: transform 0.3s ease-out;
}

.grid-item:hover img {
  transform: scale(1.2);
}

在上面的示例中，我们使用了CSS的Grid布局来创建一个三列的网格，并且设置了一些间隔。我们还将每个网格项的位置设置为相对，并将其溢出隐藏。

网格项中的图像被设置为100％宽度和自适应高度，这样它们就会填充整个网格项。我们还添加了一个鼠标悬停事件，当鼠标悬停在图像上时，它们将进行缩放。这是通过使用CSS3的transform属性来实现的。在这种情况下，我们使用缩放函数来将图像放大到1.2倍。