css grid with flexbox content and fallbacks in CSS

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">

      ...

CSS

* {
  box-sizing: border-box;
  margin: 0;
}
html {
  height: 100%;
}
.skiplinks {
  position: absolute;
}
.accessibility {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
.accessibility:focus {
  background: #fff;
  clip: auto;
  font-weight: bold;
  height: auto;
  left: 10px;
  margin: 0;
  overflow: visible;
  padding: 5px;
  top: 10px;
  width: auto;
}
.full > .wrapper, .site-wide > .wrapper {
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}
@media (min-width: 980px) {
  .full > .wrapper, .site-wide > .wrapper {
    max-width: 940px;
    padding-left: 0;
    padding-right: 0;
  }
}
@supports (grid-area: auto) {
  body {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: 
    [full-start] 1fr
    [main-start] repeat(12, minmax(auto, 60px)) [main-end]
    1fr [full-end];
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
  }
  body > * {
    grid-column: main;
  }
  .site-main, .site-content-sidebar-wrapper {
    grid-column: 1 / span 14;
    display: grid;
    grid-gap: 20px;
    grid-template-columns: 
    [full-start] 1fr
    [main-start] repeat(12, minmax(auto, 60px)) [main-end]
    1fr [full-end];
  }
  .site-sidebar, .site-content {
    grid-column: 2 / span 12;
  }
  .site-sidebar {
    grid-row: 1;
  }
  .site-wide {
    grid-column: 2 / span 12;
  }
  .full {
    grid-column: full;
  }
  @media (min-width: 641px) {
    .site-content {
      grid-column: 5 / span 9;
    }
    .site-sidebar {
      grid-column: 2 / span 3;
    }
  }
}
@supports not (grid-area: auto) {
  .site-full {
    margin-left: -20px;
    margin-right: -20px;
  }
  .site-main {
    padding: 0 20px;
  }
  .site-header, .site-main, .site-full, .site-wide, .site-content-sidebar-wrapper, .site-sidebar {
    margin-bottom: 20px;
  }
  .site-content-sidebar-wrapper {
    display: table;
    width: 100%;
  }
  .site-sidebar {
    display: table-caption;
  }
...