css grid with flexbox content and fallbacks

Kev Bonnet had already created what I was thinking. Magic!

by ian_smithz

HTML

<nav class="skiplinks">
    <a class="accessibility" href="#main">Skip to main content</a>
</nav>

<header class="site-header full" role="banner">
    <div class="wrapper">
        <p>Header</p>
    </div>
</header>

<main id="main" class="site-main full">

    <div class="site-full full">
        <p>Fullwidth content - e.g. hero image, video</p>
    </div>

    <div class="site-wide">
        <div class="wrapper">

            <h1>H1 page heading inside wide content</h1>
            <p>Internal grid layout below is based on an existing desktop-first grid system. Now updated to be <strong>mobile-first flexbox</strong> without changing HTML markup. Fallback to simple 2-col "inline-block" layout.</p>

            <h2>4-cols with extra <code>grid-item</code></h2>
            <p>Can set <code>data-cols-fill="true"</code> on parent <code>grid</code> to automatically handle rows that are incomplete or contain orphans.</p>

            <div class="grid grid-4" data-cols-fill="false">

                <div class="grid-item">
                    <div class="grid-item-wrap">
                        Grid item - equal height columns
                    </div>
                </div>
                <div class="grid-item">
                    <div class="grid-item-wrap">
                        Grid item
                    </div>
                </div>
                <div class="grid-item">
                    <div class="grid-item-wrap">
                        Grid item
                    </div>
                </div>
                <div class="grid-item">
                    <div class="grid-item-wrap">
                        Grid item
                    </div>
                </div>
                <div class="grid-item">
                    <div class="grid-item-wrap">
                        Grid item
                    </div>
                </div>

            </div>

            <h2>Nested grid</h2>

            <div class="grid" data-cols-fill="false">

      ...

SCSS

// Modify any of the following 3 variables to update overall site width...
$grid-column-width: 60px;
$grid-column-count: 12;
$grid-gap: 20px;

// We're implicitly defining "full" and "main" grid template areas by specifying "-start" and "-end" - see
// https://rachelandrew.co.uk/archives/2017/06/01/breaking-out-with-css-grid-explained/
$grid-template-cols: '
    [full-start] 1fr
    [main-start] repeat(#{$grid-column-count}, minmax(auto, #{$grid-column-width})) [main-end]
    1fr [full-end]';

$site-width: ($grid-column-count * ($grid-column-width + $grid-gap)) - $grid-gap; // 940px
$site-padding: $grid-gap;

$bg-blue: rgb(69, 108, 169);
$bg-grey: #ccc;
$color-light: #fff;

$mq-small: 480px;
$mq-medium: 640px;
$mq-large: 980px;

// -------------------------------------------------------
// Simple reset, basic styling
// -------------------------------------------------------
* {
    box-sizing: border-box;
    margin: 0;
}

html {
    height: 100%;
}

.skiplinks {
    position: absolute;
}

// Accessibility
.accessibility {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;

    &:focus {
        background: $color-light;
        clip: auto;
        font-weight: bold;
        height: auto;
        left: 10px;
        margin: 0;
        overflow: visible;
        padding: 5px;
        top: 10px;
        width: auto;
    }
}

.full,
.site-wide {
    > .wrapper {
        margin: 0 auto;
        padding-left: $grid-gap;
        padding-right: $grid-gap;

        @media (min-width: #{$site-width + (2 * $grid-gap)}) {
            max-width: $site-width;
            padding-left: 0;
            padding-right: 0;
        }
    }
}

// -------------------------------------------------------
// Page template grid  - CSS Grid
// -------------------------------------------------------
// -------------------------------------------------------
// Standards CSS grid support -...