Get divs to wrap horizontally

Question

I'm making a blog in which the results of a search for articles will be contained in divs. The layout of my website is all horizontal (i.e. the articles scroll horizontally).

Making a single line of divs is easy but that not what I want. It will be easier if I explain with a diagram. Here's how I want the divs to be:

 ______________   ______________   ______________
|    Div 1     | |    Div 4     | |    Div 7     |
|______________| |______________| |______________|
 ______________   ______________   ______________
|    Div 2     | |    Div 5     | |    Div 8     |
|______________| |______________| |______________|
 ______________   ______________ 
|    Div 3     | |    Div 6     |
|______________| |______________|

But if the window is taller then there's more space vertically, which should give:

 ______________   ______________ 
|    Div 1     | |    Div 5     |
|______________| |______________|
 ______________   ______________ 
|    Div 2     | |    Div 6     |
|______________| |______________|
 ______________   ______________ 
|    Div 3     | |    Div 7     |
|______________| |______________|
 ______________   ______________
|    Div 4     | |    Div 8     |
|______________| |______________|

This is what I mean by horizontal wrapping. In short, the divs take as much vertical space as then can before occupying a new column.

I was hoping this was possible with pure html/css but I'm having a feeling that it's not possible without a little bit of javascript.

Answer 1

You can use Flexbox for this. You need to set fixed height on parent element or 100vh and flex-direction: column.

* {
  box-sizing: border-box;
}
ul {
  display: flex;
  height: 100vh;
  flex-direction: column;
  align-items: flex-start;
  align-content: flex-start;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
}

li {
  padding: 20px 60px;
  border: 1px solid black;
}

<ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li></ul>

Answer 2

I think in pure css this can only be done with flexbox:

  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-content: flex-start;

Live-Example (change the height of the container):

https://codepen.io/MattDiMu/pen/zdBxad

edit: Yes, using 100vh for the size of the container is the much more elegant solution :)