Basic CSS grid layout with progressive enhancement

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

    .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;

Further reading

Sass mixin for fallback support:

Grid vs flexbox:

Basis for this article:



Leave a Reply

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

You are commenting using your 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