$count: 12;

​

@function randomNum($max, $min: 0, $u: 1) {

    @return ($min + random($max)) * $u;

}

​

@function randomNumHeight($max, $min: 0, $u: 1) {

    @return ($min + random($max)) * $u * 1px;

}

​

@function randomColor() {

    @return rgb(randomNum(255), randomNum(255), randomNum(255));

}

​

.g-container {

    height: 100vh;

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    grid-template-rows: masonry;

}

​

@for $i from 1 to $count + 1 {

    .g-item:nth-child(#{$i}) {

        position: relative;

        background: randomColor();

        margin: 0.5vw;

        grid-template-rows: 1fr auto;

        height: randomNumHeight(300, 50);

​

        &::after {

            content: "#{$i}";

            position: absolute;

            color: #fff;

            font-size: 2vw;

            top: 50%;

            left: 50%;

            transform: translate(-50%, -50%);

        }

    }

}

​