How to implement a grid of images with different sizes in CSS?

Question

css

Bottom line: there are a bunch of pictures of different sizes. It is necessary, using CSS3, to arrange them as shown in the picture:

Now it looks like this:

Code:

<article id="preview">
<a href="link"><img src="img" class="img" alt="starry-night-over-the-rhone" height="1333" width="2000">Starry Night Over the Rhone</a>
</article>

(each block is 1 article)
CSS for them:

#preview {
    float: left;
    width: 30%;
    margin: 0px 1% 1%;
}

I understand that this is due to the fact that the last picture is adjusted to the block with the "Cypresses" picture:

But I don't know how to make it not do this.
Need a CSS solution (without px, in %)
Thanks in advance!

Answer 1

The simplest solution is to split it into N columns, since your images have the same width.

Answer 2

Everything, the problem is solved, thank you very much ;)