CSS Grid with CSS Flexbox fallback

grid-with-flexbox-fallback.scss

// See a working demo at: http://hive-framework.philwareham.co.uk/#section-grid

/* ==========================================================================
   Layout for screen media at 1st breakpoint
   ========================================================================== */

@media screen and (min-width: 32em) {

    /**
     * Grid container.
     */

    .layout-container {
        display: flex; // Flexbox fallback for browsers without CSS Grid support.
        display: grid;
        flex-wrap: wrap; // Flexbox fallback for browsers without CSS Grid support.
        margin: 0 -1em; // Flexbox fallback for browsers without CSS Grid support.
        grid-template-columns: repeat(12, 1fr);
        grid-gap: 0 2em;

        > * {
            min-width: 0; // Fix Firefox `pre` overflow issues.
            padding: 0 1em; // Flexbox fallback.
            box-sizing: border-box; // Flexbox fallback.
        }
    }

    /**
     * Generate sizes all for grid column cells.
     *
     * We will then adjust them at various breakpoints.
     *
     * Example HTML:
     *
     * <div class="layout-1col"></div>
     *
     * <div class="layout-2col">
     * <div class="layout-2col">
     *
     * <div class="layout-4col-3span"></div>
     * <div class="layout-4col"></div>
     */

    .layout-1col,
    .layout-2col,
    .layout-3col,
    .layout-3col-2span,
    .layout-4col-alt,
    .layout-4col-2span,
    .layout-4col-3span {
        width: 100%; // Flexbox fallback.
        grid-column: span 12;
    }

    /**
     * Cells for 4 column layouts are generated, but as 2 columns at this width.
     */

    .layout-4col {
        width: 50%; // Flexbox fallback.
        grid-column: span 6;
    }

    // Override Flexbox fallback for browsers with CSS Grid support.
    @supports (display: grid) {
        .layout-container {
            margin: 0;
        }

        .layout-1col,
        .layout-2col,
        .layout-3col,
        .layout-3col-2span,
        .layout-4col,
        .layout-4col-alt,
        .layout-4col-2span,
        .layout-4col-3span {
            width: auto;
            padding: 0;
        }
    }

}


/* ==========================================================================
   Layout for screen media at 2nd breakpoint
   ========================================================================== */

@media screen and (min-width: 48em) {

    /**
     * Cells for 2 column and 3 column layouts are generated.
     *
     * Example HTML:
     *
     * <div class="layout-3col"></div>
     * <div class="layout-3col-2span"></div>
     */

    .layout-2col {
        width: 50%; // Flexbox fallback.
        grid-column: span 6;
    }

    .layout-3col {
        width: 33.333%; // Flexbox fallback.
        grid-column: span 4;
    }

    .layout-3col-2span {
        width: 66.666%; // Flexbox fallback.
        grid-column: span 8;
    }

    // Override Flexbox fallback for browsers with CSS Grid support.
    @supports (display: grid) {
        .layout-2col,
        .layout-3col,
        .layout-3col-2span {
            width: auto;
        }
    }

}


/* ==========================================================================
   Layout for screen media at 3rd (final) breakpoint
   ========================================================================== */

@media screen and (min-width: 64em) {

    /**
     * Cells for 4 column layouts are generated.
     *
     * Example HTML:
     *
     * <div class="layout-4col-3span"></div>
     * <div class="layout-4col-alt"></div>
     */

    .layout-4col,
    .layout-4col-alt {
        width: 25%; // Flexbox fallback.
        grid-column: span 3;
    }

    .layout-4col-2span {
        width: 50%; // Flexbox fallback.
        grid-column: span 6;
    }

    .layout-4col-3span {
        width: 73%; // Flexbox fallback.
        grid-column: span 9;
    }

    // Override Flexbox fallback for browsers with CSS Grid support.
    @supports (display: grid) {
        .layout-4col,
        .layout-4col-alt,
        .layout-4col-2span,
        .layout-4col-3span {
            width: auto;
        }
    }

}