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

Sass mixin for fallback support: https://css-tricks.com/browser-compatibility-css-grid-layouts-simple-sass-mixins/

Grid vs flexbox: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout

Basis for this article: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s