plain-ui/src/scss/layouts/_masonry.scss

/**
 *  masonry
 *
 *  <div class="masonry">
 *      <div class="mansonry__iten">
 *
 *      </div>
 *  </div>
 *
 *  @author Björn Hase, me@herr-hase.wtf
 *  @license http://opensource.org/licenses/MIT The MIT License
 *  @link https://gitea.node001.net/tiny-components/plain-ui.git
 *
 */

$masonry_sizes: (
    1: 25%,
    2: 55%,
    3: 20%,
    4: 67%,
    5: 33%
) !default;

$masonry_height: 200px !default;
$masonry_height--sm: 300px !default;
$masonry_gap: 15px !default;
$masonry_gap-offset: 10px !default;

.masonry {
    display: flex;
    width: 100%;
    flex-flow: row wrap;
    gap: $masonry_gap;

    &__item {
        width: 100%;
        height: $masonry_height;

        @include media-sm() {
            height: $masonry_height--sm;

            // add width from data
            @each $index, $size in $masonry_sizes {
                &:nth-child(4n+#{$index}) {
                    width: calc(#{$size} - #{$masonry_gap-offset});
                }
            }
        }
    }
}