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

Question

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

html:

<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>

css:

.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%;
}

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

Answer 1

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

Flexbox 非常适合单列或单行组织，但缺乏多列/多行组织。这就是 CSS 网格的用武之地。

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

#container {
  display: grid;
}

然后，我们需要指定列数和行数。我们可以使用grid-template-rows 和grid-template-columns properties for this. For every extra value you add, you add another row/column. For example, grid-template-columns: 20px 20px;'将生成两列，每列 20px 宽。如果您指定容器的宽度和高度，则可以将值设置为自动（例如grid-template-columns: auto auto;，它创建两个大小相等且尽可能宽的列，同时仍保持在网格的边界内。相同适用于grid-template-rows。所以现在假设您想要一个 100 像素 x 100 像素的 3x3 网格。

#container {
  display: grid;
  width: 100px;
  height: 100px;
  grid-template-rows: auto auto auto;
  grid-template-columns: auto auto auto;
}

太棒了！现在我们需要指定我们希望网格项目去哪里。为此，我们使用 grid-row 和 grid-column 属性。让我们来看看它是什么样子的。

#image-one {
  grid-row: 1 / 2;
  grid-column: 1 / 2;
}

那么这些数字是什么意思？

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

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

现在您可以对每张图片执行此操作。这是第二张图片：

#image-two {
  grid-row: 1 / 2;
  grid-column: 2 / 3;
}

这会将图像放在第一行第二列。记住，如果你卡住了，就画一幅画！这很难，因为我们是用文字描述视觉指令，所以使用绘图来帮助翻译非常有帮助。

此外，图像不必在网格上占据 1 x 1 的空间。例如，您可以制作一个从第一个框开始的 2x2 图像，方法是...

#test-image {
  grid-row: 1 / 3;
  grid-column: 1 / 3;
}

...将图像置于水平网格线 1 和 3 以及垂直网格线 1 和 3 之间，也就是制作一个 2x2 的盒子！再次，如果您感到困惑，请绘制图表。

另外，如需进一步阅读和有用的图表，请查看https://css-tricks.com/snippets/css/complete-guide-grid/。他们的解释工作比我做得更好。此外，如果您好奇的话，他们有一个关于 flex-box 的优秀教程/评论/文档：https://css-tricks.com/snippets/css/a-guide-to-flexbox/。

祝你好运，编码愉快！ :)