_grid.scss

.grid {
    display: flex;
    flex-wrap: wrap;

    > * {
        flex-basis: calc(100% - 20px);
        margin: 10px;

        @media all and (min-width: 480px) {
            flex-basis: calc(50% - 20px);
        }

        @media all and (min-width: 1024px) {
            flex-basis: calc(30% - 20px);
        }
    }

    &--two {
        > * {
            // fix for IE11 not rendering calc flex-basis correctly
            flex-basis: auto;
            width: calc(50% - 20px);
        }
    }

    &--narrow {
        text-align: center;

        @include media-query(tablet-portrait) {
            text-align: left;
        }
    }
}

@supports (display: grid) {
    .grid {
        display: grid;
        margin: 30px 0;
        grid-gap: 10px;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

        > * {
            flex-basis: initial;
            width: auto;
            margin: 0;
        }

        &--narrow {
            justify-content: center;
            text-align: center;
            grid-template-columns: repeat(auto-fit, minmax(200px, 200px));

            @include media-query(tablet-portrait) {
                justify-content: flex-start;
                text-align: left;
            }
        }

        &--two {
            grid-template-columns: 100%;
            grid-gap: 0;

            @include media-query(tablet-portrait) {
                grid-template-columns: 50% 50%;
            }
        }

        &--max-three {
            grid-template-columns: 1fr;
            grid-gap: 30px;

            @include media-query(mob-landscape) {
                grid-template-columns: repeat(2, 1fr);
            }

            @include media-query(tablet-portrait) {
                grid-template-columns: repeat(3, 1fr);
            }
        }
	}
}