I am trying to achieve an effect similar to [this](https://blaskdemo.wordpress.com/). That is, I have some blocks (here, `articles`) that have the same width but can have different heights, and I want them to be next to their upper neighbors. When displaying the article inline and using a top vertical alignment, the articles still stay on their lines as expected:

```
<html>
<head>
<style>
  article { display: inline-block; vertical-align: top; width:200px; margin:5px; background-color:#D0D0D0; }
</style>
</head>
<body>
<div style="width:630px; background-color:#F0F0F0">
<article style="height:100px;"></article><article style="height:200px;"></article><article style="height:300px;"></article><article style="height:200px;"></article><article style="height:200px;"></article><article style="height:100px;"></article>
</div>
</body>
</html>

```

I guess this would be easier if I would set the articles into predefined columns *then* align vertically within this columns, but AFAICT this is not the case in the example given above (with possibly the advantage of being able to dynamically change the number of columns).

Is this even possible to do this in CSS? Or are they using some complicated JavaScript to achieve this?

(Also as a side note, I need to have `articles` next to each other without line breaks to prevent spurious white spaces to appear in between, but this doesn't seem to be a problem in the page above).

EDIT

An important behavior of the page I linked that I failed to mention is that the articles are displayed more or less in the same order than they are listed, so that chronological order is preserved for example.