Create Responsive Masonry Style Layout with CSS Grid

In this post we will create responsive masonry style layout with CSS Grid.

HTML

<div class="masonry">
 <div class="a">a</div>
 <div class="b">b</div>
 <div class="c">c</div>
 <div class="d">d</div>
 <div class="e">e</div>
 <div class="f">f</div>
 <div class="g">g</div>
 <div class="h">h</div>
 <div class="i">i</div>
</div>

CSS

html {
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

body {
    padding: 0;
    margin: 0;
    background-color: azure;
}

.masonry {
    width: 22.4vw;
    margin: 10px auto;
    font-size: 1.9rem;
    color: #fff;
    text-align: center;
    display: grid;
    gap: 9px;
    grid-template-columns: 100px 100px;
    grid-template-rows: 90px 90px 90px 90px 90px 90px 90px 90px;

}

.a {
    grid-column: 1/4;
    grid-row: 1/2;
    background-color: #009490;
}

.b {
    grid-column: 1/4;
    grid-row: 2/3;
    background-color: #D35B38;
}

.c {
    grid-column: 1/4;
    grid-row: 3/4;
    background-color: #802C6E;
}

.d {
    grid-column: 1/2;
    grid-row: 4/5;
    background-color: #9EA8DC;
}

.e {
    grid-column: 2/4;
    grid-row: 4/5;
    background-color: #DEB294;
}

.f {
    grid-column: 1/4;
    grid-row: 5/6;
    background-color: #F9C555;

}

.g {
    grid-column: 1/4;
    grid-row: 6/7;
    background-color: #DE9AC0;
}

.h {
    grid-column: 1/4;
    grid-row: 7/8;
    background-color: #647F85;
}

.i {
    grid-column: 1/4;
    grid-row: 8/9;
    background-color: #8AABCA;
}

/** Tablets **/

@media (min-width: 768px) {
    .masonry {
        grid-template-columns: 100px 100px;
        grid-template-rows: 90px 90px 90px 90px 90px 90px 90px 90px;
    }

    .a {
        grid-column: 1/4;
        grid-row: 1/3;
    }

    .b {
        grid-column: 1/2;
        grid-row: 3/4;
    }

    .c {
        grid-column: 2/4;
        grid-row: 3/4;
    }

    .d {
        grid-column: 1/2;
        grid-row: 4/5;
    }

    .e {
        grid-column: 2/4;
        grid-row: 4/5;
    }

    .f {
        grid-column: 1/4;
        grid-row: 5/6;
    }

    .g {
        grid-column: 1/2;
        grid-row: 6/7;

    }

    .h {
        grid-column: 2/4;
        grid-row: 6/7;
    }

    .i {
        grid-column: 1/4;
        grid-row: 7/8;
    }
}

/** Desktop **/

@media (min-width: 1200px) {

    .masonry {
        grid-template-columns: 100px 100px 100px;
        grid-template-rows: 90px 90px 150px 150px 150px;
    }

    .a {
        grid-column: 1/3;
        grid-row: 1/3;
    }

    .b {
        grid-column: 3/4;
        grid-row: 1/2;
    }

    .c {
        grid-column: 3/4;
        grid-row: 2/4;
    }

    .d {
        grid-column: 1/2;
        grid-row: 3/4;
    }

    .e {
        grid-column: 2/3;
        grid-row: 3/4;
    }

    .f {
        grid-column: 1/2;
        grid-row: 4/5;
    }

    .g {
        grid-column: 2/4;
        grid-row: 4/5;
    }

    .h {
        grid-column: 1/3;
        grid-row: 5/6;
    }

    .i {
        grid-column: 3/4;
        grid-row: 5/6;
    }
}