CSS | Grid layout with crude non-supporting fallback for IE

grid.scss

.list {
        margin: 0;
        padding-left: 0;
        list-style-type: none;
        @media only screen and (min-width: $breakpoint-sm) {
            display: grid;
            grid-column-gap: 50px;
            grid-row-gap: 100px;
            grid-template-columns: repeat(2, 1fr);
        }
        @media only screen and (min-width: $breakpoint-md) {
            grid-template-columns: repeat(3, 1fr);
        }
        @media only screen and (min-width: $breakpoint-lg) {
            grid-template-columns: repeat(4, 1fr);
        }
        &__item {
            @media only screen and (min-width: $breakpoint-sm) {
                display: inline-block;
                max-width: 49%;
            }
            @media only screen and (min-width: $breakpoint-md) {
                max-width: 32%;
            }
            @media only screen and (min-width: $breakpoint-lg) {
                max-width: 24%;
            }
            @supports (display: grid) {
                display: block;
                max-width: unset;
            }
        }
    }

Grid. Lovely grid.

This replaces a rather verbose float, calc and clear gist.

The &__item styles could be deleted or simplified further depending on how you feel about Internet Explorer. The above maintains a crude grid in IE11.

Notes on IE and Edge

• Internet Explorer 10 was last updated during 2012 and will reach end of support on January 31, 2020.
• Internet Explorer version 11.0 was released on October 17, 2013 and development of new features has ceased.
• Microsoft Edge, which supports grid, became the default browser on Windows upon release of Windows 10 in 2015.