如何制作 2x2 图像网格 CSS答案

【问题标题】：how to make 2x2 image grid CSS如何制作 2x2 图像网格 CSS
【发布时间】：2019-03-15 01:40:57
【问题描述】：

我是一名新闻专业的学生，我不知道如何为工作的 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;
}

【问题讨论】：

标签： css grid photo

【解决方案1】：

您需要做的就是设置一个容器来保存您的所有图像，并在您的孩子img 选择器上设置float: left 和width: 50%。由于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。

【讨论】：

【解决方案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>

【讨论】：