<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: 1280px;
  margin: auto;
  columns: 4 280px;
  column-gap: 1rem;
  font-size: 1.2rem;
}
.box {
  background: red;
  color: white;
  margin: 0 0 1rem;
  display: inline-block; /* stops block being split across columns. Could use break-inside: avoid for modern browsers; */
  width: 100%;
  break-inside: avoid;
  text-align: center;
  font-weight: bold;
}
.box:nth-child(odd) {
  background: blue;
}