wrap div around other divs avoiding space in between

Question

I have divs with class .block which has the following css:

.block {
    vertical-align: top;
    margin-top: 0;
    display: inline-flex;
    padding: 10px;
    min-width: 220px;
    max-width: 300px;
    min-height: 200px;
    max-height: 400px;
    font-size: 17pt;
    color: #fff;
    text-align: center;
    margin-bottom: 20px;
    margin-right: 20px;
    align-items: center;
    justify-content: center;
    box-shadow: 3px 3px 5px #888888;
    border-radius: 10px;
    word-break:break-all;
}

And this is what the page currently looks like:

But I want it to wrap and go to the top with the other divs like so:

How can something like this be achieved?