CSS 列，从上到下然后从左到右

Question

I'm building a newspaper style layout for an app. My page is split into 8 columns, and the columns should fill vertically first then horizontally.

If there isn't enough content to fill the page, the columns should still fill vertically first leaving white space to the right of the page. Currently they fill horizontally first leaving white space bellow the content.

I've tried this with CSS columns but it seems to always fill the width of the page, I can't see a way to change this.

I've also tried with flex box, but flex wrap will not break/ wrap inside of a div like CSS columns will.

.flex-col {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-height: 300px;

  p {
    width: 250px;
  }
}

.css-col {
  columns: 3;
}

See here for an example of what I have tried.

Answer 1

Adding column-fill: auto; to .css-col should give you what you are looking for, but you need to add a height to .css-col

Answer 2

You seem to be closing the divs too soon. Perhaps inline-flex is closer. I'm not clear what this is supposed to look like otherwise

 .flex-col { display: inline-flex; flex-direction: column; flex-wrap: wrap; max-height: 300px; } p { width: 250px; } }

 <div class="flex-col"> <p>The quick brown fox jumped over the small lazy dog. The quick brown fox jumped over the small lazy dog.</p> <p>The quick brown fox jumped over the small lazy dog. The quick brown fox jumped over the small lazy dog.</p> <p>The quick brown fox jumped over the small lazy dog. The quick brown fox jumped over the small lazy dog.</p> <p>The quick brown fox jumped over the small lazy dog. The quick brown fox jumped over the small lazy dog.</p> <p>The quick brown fox jumped over the small lazy dog. The quick brown fox jumped over the small lazy dog.</p> <p>The quick brown fox jumped over the small lazy dog. The quick brown fox jumped over the small lazy dog.</p> <p>The quick brown fox jumped over the small lazy dog. The quick brown fox jumped over the small lazy dog.</p> </div>

https://codepen.io/Paulie-D/pen/mpBNBg