* {
  box-sizing: border-box;
}
main {
  display: flex;
  flex-flow: column wrap;
  align-content: space-between;
  height: calc(100vh - 16px);
  background: #000;
  padding: 2%;
  font-family: monospace;
}

article {
  padding: 1em;
  width: 32%;
  margin-bottom: 2%; /* (100-32*3)/2 */
  background: #eee;
  writing-mode: vertical-lr;
  text-orientation: upright !important;
  text-align: left !important;
}

/* Re-order articles into rows */
article:nth-child(3n+1) { order: 1; }
article:nth-child(3n+2) { order: 2; }
article:nth-child(3n)   { order: 3; }

/* Force new columns */
main::before,
main::after {
  content: "";
  flex-basis: 100%;
  width: 0;
  order: 2;
}