Basic CSS grid layout with progressive enhancement

Basic CSS grid layout with progressive enhancement

Basic css grid layout that supports down to IE-10.

<style>
    .grid-wrapper {
        margin: 0 -20px;
        padding: 0;
    }
    .grid-wrapper div {
        display: inline-block;
        float: left;
        width: 180px;
        margin: 0 10px 20px 10px;
    }

    @supports (display: grid) {
        .grid-wrapper {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            grid-gap: 20px;
            grid-auto-rows: 200px;
            margin: 0;
        }
        .grid-wrapper div {
            width: auto;
            min-height: auto;
            margin: 0;
        }
    }
</style>

Further reading