如何制作2x2图像网格CSS

Question

我是一名新闻专业的学生，​​我不知道为一个工作的2x2图像网格做CSS，起初图像是连续的，现在它们在一个列中非常伸展。有人可以帮我弄清楚怎么做吗？ (photo of my code)

/* Work Layout */
.work div {
  display: flex;
  flex-flow: wrap;
  width: 150px;
  height: 300px;
}
.img {
  "images/benbball.jpg"
  width: 50px;
}

Answer 1

您需要做的就是设置一个容器来容纳您的所有图像，并在您的孩子float: left选择器上设置width: 50%和img。由于width设置为50%，每行只能容纳两个，接下来的两个将下降到下一行。

这可以在以下内容中看到：

.container img {
  float: left;
  width: 50%;
}

<div class="container">
  <img src="http://placehold.it/50" />
  <img src="http://placehold.it/50" />
  <img src="http://placehold.it/50" />
  <img src="http://placehold.it/50" />
</div>

如果你想要图像之间的空间，你需要给每个<img>一个包含父母的元素来设置float: left和width: 50%，在孩子width上有一个额外的约束margin和可选的<img>。为了获得最佳效果，这将是一个计算驱动的宽度，即100%减去边距：

.container .image {
  width: 50%;
  float: left;
}

.container img {
  width: calc(100% - (20px * 2));
  margin: 20px;
}

<div class="container">
  <div class="image">
    <img src="http://placehold.it/50" />
  </div>
  <div class="image">
    <img src="http://placehold.it/50" />
  </div>
  <div class="image">
    <img src="http://placehold.it/50" />
  </div>
  <div class="image">
    <img src="http://placehold.it/50" />
  </div>
</div>

或者，如果您想使用flexbox，您需要在容器上设置display: flex和flex-wrap: wrap：

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

.container .image {
  width: 50%;
}

.container img {
  width: calc(100% - (20px * 2));
  margin: 20px;
}

<div class="container">
  <div class="image">
    <img src="http://placehold.it/50" />
  </div>
  <div class="image">
    <img src="http://placehold.it/50" />
  </div>
  <div class="image">
    <img src="http://placehold.it/50" />
  </div>
  <div class="image">
    <img src="http://placehold.it/50" />
  </div>
</div>

使用flexbox，您将不需要float: left。

Answer 2

CSS网格

.wrapper {
  display: inline-grid;
  grid-template-columns: repeat(2, [col-start] 1fr);
  grid-gap: 10px;
}


<div class="grid">
  <img src="http://placehold.it/50" />
  <img src="http://placehold.it/50" />
  <img src="http://placehold.it/50" />
  <img src="http://placehold.it/50" />
</div>