How to add a row gap with CSS column count?

I'm trying to create a Masonry layout with CSS. I'm using here the column-count property. This works, but I'd like to add a vertical gap between items. How could I do this? I tried with row-gap property but it does not do anything, or with a margin-bottom, which works, but I don't want to have this on the last row items.

This is my code:

<section>
    <img src="/img.jpg">
    <img src="/img.jpg">
    <img src="/img.jpg">
    <img src="/img.jpg">
    <img src="/img.jpg">
    <img src="/img.jpg">
</section>

section {
    column-count: 4;
    gap: 24px;
}

section > * {
    margin-bottom: 24px;
}

Thanks for your answers!