Html 如何使图像填充图像网格中的两列

我对编写html和css代码是新手。我尝试使用CSS FlexBox制作一个三列的图像库

html:

---

上面代码的结果是一个正常的三列图像网格，每列中填充图片。有没有办法让第一行、第一列中的第一个图像延伸到第一行、第二列？

对于刚接触HTML/CSS的人来说非常好！但您可能从未听说过CSS网格

Flexbox适用于单列或单行组织，但缺少多列/多行组织。这就是css网格的用武之地

要使对象成为栅格，请执行以下操作：

#容器{
显示：网格；
}

然后，我们需要指定列和行的数量。我们可以为此使用

网格模板行

和

网格模板列属性。对于您添加的每一个额外值，您都会添加另一行/列。例如，

网格模板列：20px 20px；'将生成两个列，每个列的宽度为20px。如果指定容器的宽度和高度，则可以将该值设置为“自动”（例如，

网格模板列：auto-auto；

，它创建两个大小相同且尽可能宽的列，同时仍保持在网格的边界内。这同样适用于

网格模板行

。因此，现在假设您想要一个100px x 100px 3x3的网格

#容器{
显示：网格；
宽度：100px；
高度：100px；
网格模板行：自动；
网格模板列：自动；
}

<太好了！现在我们需要指定网格项目要走的地方。我们使用<代码>网格行和<代码>网格列< /Cord>属性。让我们看看它的样子。

#图像一{
网格行：1/2；
网格柱：1/2；
}

那么这些数字意味着什么呢

好的，当我们创建3x3网格时，实际上创建了4条垂直线和4条水平线。画出一个带边框的3x3网格。如果你感到困惑，你会看到4条水平线和4条垂直线

所以，代码是说第一个图像应该在水平网格线1和2之间，以及垂直网格线1和2之间。回到您的图形，这是第一个框

现在，您可以对每个图像执行此操作。下面是第二个图像：

#图二{
网格行：1/2；
网格柱：2/3；
}

这会将图像放在第一行第二列。记住，如果卡住了，请绘制一张图片！这很难，因为我们用文本描述视觉指令，因此使用图形帮助翻译非常有用

此外，图像不必占用网格上的1×1空间。例如，您可以通过执行以下操作制作从第一个框开始的2x2图像

#测试图像{
网格行：1/3；
网格柱：1/3；
}

…将图像放在水平网格线1和3以及垂直网格线1和3之间，即制作一个2x2框！如果您感到困惑，请再次绘制一个图表

另外，为了进一步阅读和获得有用的图表，请查看。他们比我做得更好。此外，如果您好奇的话，他们有关于flex box的优秀教程/评论/文档：

---

祝你好运，编码快乐！：）

你能用这个创建一个代码沙盒吗？这样你就能更清楚地知道你在做什么了need@poca抱歉，我只在代码编辑器上写了这篇文章，我对React没有太多的知识…这是我想要实现的图片。因此我想创建一个三列图像网格；但有时某些图像会跨越两列。对于图片的质量，我很抱歉。谢谢您的帮助！但是如果我执行

img1{网格行：1/2；网格列1/3；}，则图像不会填充整个网格

是否有办法填充整个网格？您可能希望尝试将图像用作背景图像，而不是图像，以便随着容器的增长而增长或查看flex grow：您有一个3x3网格，对吗？因此，在3乘3网格中有4条网格线和4个网格列。因此，您希望它从第一条网格线到第四条网格线，从第一个网格列到第四个网格列，因此可以执行

img1{grid row:1/4；grid column:1/4；}

<div class="row">
    <div class="column">
      <img src="sea.jpg">
      <img src="guns.jpg">
    </div>
    <div class="column">
      <img src="cars.jpg">
      <img src="gg.png">
    </div>
    <div class="column">
      <img src="games.jpg">
      <img src="games.jpg">
    </div>
  </div>

.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

.column {
  flex: 33.33%;
  padding:10,10px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}