CSS - Using flex to fill empty space in columns

by Ben Clayton

HTML

<table>
  <tr>
    <td>
      <div class='column'>
        <div class='box'>
        </div>
        <div class='box'>
        </div>
        <div class='box'>
        </div>
        <div class='box'>
        </div>
        <div class='box'>
        </div>
        <div class='empty'>
        </div>
      </div>
    </td>
    <td>
      <div class='column'>
        <div class='box'>
        </div>
        <div class='empty'>
        </div>
      </div>
    </td>
    <td>
      <div class='column'>
        <div class='empty'>
        </div>
      </div>
    </td>
  </tr>
</table>

CSS

table {
  width: 100%;
  border: 1px solid gray;
}

td {
  width: 33%;
  vertical-align: top;
}
.column {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.box {
  border: 1px solid green;
  height: 50px;
  margin-bottom: 10px;
}

.empty {
  background-color: rgba(0, 255, 0, 0.1);
  border-radius: 6px;
  flex-grow: 1;
}