html,
body {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

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

.container {
    margin: 0 auto;
    width: 100%;
}

.masonry {
    column-count: 4;
    column-gap: 1px;
    margin: 1em auto;
    width: 100%;
}

.masonry01-item {
    background-color: #ddd;

    /* next line switches direction of flow from vertical to horizontal */
    display: inline-block;

    /* note next line creates between elements and the one below; AND bigger than the column-gap */
    margin: 1px;

    /* Next line bizarrely makes the parent div occupy full width of window; though putting this in the parent class does NOT work */
    width: 100%;
}

@media only screen and (min-width: 992px) {
    .masonry {
        column-count: 4;
    }
}

@media only screen and (max-width: 992px) and (min-width: 768px) {
    .masonry {
        column-count: 3;
    }
}

@media only screen and (max-width: 767px) and (min-width: 576px) {
    .masonry {
        column-count: 2;
    }
}

@media only screen and (max-width: 575px) {
    .masonry {
        column-count: 1;
    }
}