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

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

/* Create two equal columns that sits next to each other */
.column {
  flex: 50%;
  padding: 0 4px;
}

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