我需要制作一个 4 列 3 行的图片库，其中所有这些图片的大小都相同

Question

所以我以前做过这个，但我不记得我是怎么用CSS做的。 我在这里的 html 没有变化，但这是我遇到的 css 问题。 基本上我需要这些图片的 4 列 3 行网格，所有图片的大小应该相同，并且这个网格应该居中。 我必须通过编辑 CSS 来做到这一点，但我不知道为什么我所做的一切都不起作用。

.HTML：

</div>
<div class="row"> 
  <div class="column">
    <div class="thumbnail">
        <img src="CS1.jpg" alt="Counter Strike: Global Offensive Screenshot">
        <img src="CS2.jpg" alt="Counter Strike: Global Offensive Screenshot">
        <img src="CS3.jpg" alt="Counter Strike: Global Offensive Screenshot">
      </div>
  </div>
  <div class="column">
      <div class="thumbnail">
        <img src="CS4.jpg" alt="Counter Strike: Global Offensive Screenshot">
        <img src="CS5.jpg" alt="Counter Strike: Global Offensive Screenshot">
        <img src="CS6.jpg" alt="Counter Strike: Global Offensive Screenshot">
      </div> 
  </div>
  <div class="column">
      <div class="thumbnail">
        <img src="CS7.jpg" alt="Counter Strike: Global Offensive Screenshot">
        <img src="CS8.jpg" alt="Counter Strike: Global Offensive Screenshot">
        <img src="CS9.jpg" alt="Counter Strike: Global Offensive Screenshot">
        </div>
  </div>
  <div class="column">
      <div class="thumbnail">
        <img src="CS10.jpg" alt="Counter Strike: Global Offensive Screenshot">
        <img src="CS11.jpg" alt="Counter Strike: Global Offensive Screenshot">
        <img src="CS12.jpg" alt="Counter Strike: Global Offensive Screenshot">
      </div>
  </div>
</div>

.CSS：

.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}
.column {
  padding: 0 4px;
}
.column img {
  margin-top: 8px;
  vertical-align: middle;
  display: block;
}

Answer 1

.parent {
  display: flex;
  flex-wrap: wrap;
}
.child {
  flex: 1 0 21%; 
  margin: 5px;
  height: 100px;
  background-color: blue;
}

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

Try this code
.parent {
  display: flex;
  flex-wrap: wrap;
}
.child {
  flex: 1 0 21%; 
  margin: 5px;
  height: 100px;
  background-color: blue;
}
<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>