<div class="columns">

  <div class="box">
    <p>Box 1</p>
    <p>Box 1</p>
    <p>Box 1</p>
    <p>Box 1</p>
    <p>Box 1</p>
    <p>Box 1</p>
    <p>Box 1</p>
  </div>
  <div class="box">
    <p>Box 2</p>
    <p>Box 2</p>
    <p>Box 2</p>
    <p>Box 2</p>
    <p>Box 2</p>

  </div>
  <div class="box">
    <p>Box 3</p>
    <p>Box 3</p>
    <p>Box 3</p>

  </div>
  <div class="box">
    <p>Box 4</p>
    <p>Box 4</p>
    <p>Box 4</p>
    <p>Box 4</p>
    <p>Box 4</p>
    <p>Box 4</p>
    <p>Box 4</p>

  </div>
  <div class="box">
    <p>Box 5</p>
    <p>Box 5</p>
    <p>Box 5</p>
    <p>Box 5</p>
    <p>Box 5</p>
    <p>Box 5</p>
    <p>Box 5</p>
    <p>Box 5</p>
  </div>
  <div class="box">
    <p>Box 6</p>
    <p>Box 6</p>
    <p>Box 6</p>
    <p>Box 6</p>
    <p>Box 6</p>

  </div>
  <div class="box">
    <p>Box 7</p>
    <p>Box 7</p>
    <p>Box 7</p>

  </div>
  <div class="box">
    <p>Box 8</p>
    <p>Box 8</p>
    <p>Box 8</p>
    <p>Box 8</p>
    <p>Box 8</p>
    <p>Box 8</p>
    <p>Box 8</p>

  </div>
  <div class="box">
    <p>Box 9</p>
    <p>Box 9</p>
    <p>Box 9</p>
    <p>Box 9</p>
    <p>Box 9</p>
    <p>Box 9</p>
    <p>Box 9</p>
    <p>Box 9</p>
    <p>Box 9</p>
    <p>Box 9</p>
  </div>
  <div class="box">
    <p>Box 10</p>
    <p>Box 10</p>
    <p>Box 10</p>
    <p>Box 10</p>
    <p>Box 10</p>
  </div>
  <div class="box">
    <p>Box 11</p>
    <p>Box 11</p>
    <p>Box 11</p>
  </div>
  <div class="box">
    <p>Box 12</p>
    <p>Box 12</p>
    <p>Box 12</p>
    <p>Box 12</p>
    <p>Box 12</p>
    <p>Box 12</p>
    <p>Box 12</p>
  </div>
  <div class="box">
    <p>Box 13</p>
    <p>Box 13</p>
    <p>Box 13</p>
    <p>Box 13</p>
    <p>Box 13</p>
    <p>Box 13</p>
    <p>Box 13</p>
    <p>Box 13</p>
    <p>Box 13</p>
    <p>Box 13</p>
    <p>Box 13</p>
    <p>Box 13</p>
    <p>Box 13</p>
    <p>Box 13</p>
  </div>
</div>
body {
  margin: 0;
  padding: 1rem;
}
.columns {
  max-width: 80vw;
  margin: auto;
  columns: 4 280px;
  column-gap: 1rem;
  font-size: 1.2rem;
}
.box {
  background: red;
  color: white;
  margin: 0 0 1rem;
  display: inline-block;
  width: 100%;
  text-align: center;
  font-weight: bold;
}
.box:nth-child(odd) {
  background: blue;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.