CSS grids -flexbox fallback - complex layout

No Bootstrap / Foundation. Just CSS, mmm. fallback support for flexbox. compiled sass version.

by ian_smithz

HTML

<header class="header">
  <h1>CSS Grid Layout</h1>
  <h2>With @support flexbox fallback.</h2>
</header>

<div class="grid ">
  <div class="item" tabindex="1">
    <div class="box">
      <div class="diamond"><span>1</span></div>
      <div class="tooltip">grid-area: hero</div>
    </div>
  </div>
  <div class="item" tabindex="2">
    <div class="box">
      <div class="diamond"><span>2</span></div>
      <div class="tooltip">grid-area: big</div>
    </div>
  </div>
  <div class="item" tabindex="3">
    <div class="box">
      <div class="diamond"><span>3</span></div>
      <div class="tooltip">grid-area: medium</div>
    </div>
  </div>
  <div class="item" tabindex="4">
    <div class="box">
      <div class="diamond"><span>4</span></div>
      <div class="tooltip">grid-area: medium</div>
    </div>
  </div>
  <div class="item" tabindex="5">
    <div class="box">
      <div class="diamond"><span>5</span></div>
      <div class="tooltip">grid-area: small</div>
    </div>
  </div>
  <div class="item" tabindex="6">
    <div class="box">
      <div class="diamond"><span>6</span></div>
      <div class="tooltip">grid-area: small</div>
    </div>
  </div>
  <div class="item" tabindex="7">
    <div class="box">
      <div class="diamond"><span>7</span></div>
      <div class="tooltip">grid-area: small</div>
    </div>
  </div>
  <div class="item" tabindex="8">
    <div class="box">
      <div class="diamond"><span>8</span></div>
      <div class="tooltip">grid-area: small</div>
    </div>
  </div>
  <div class="item" tabindex="9">
    <div class="box">
      <div class="diamond"><span>9</span></div>
      <div class="tooltip">grid-area: small</div>
    </div>
  </div>
  <div class="item" tabindex="10">
    <div class="box">
      <div class="diamond"><span>10</span></div>
      <div class="tooltip">grid-area: small</div>
    </div>
  </div>
  <div class="item" tabindex="11">
    <div class="box">
      <div class="diamond"><span>11</span></div>
      <div...

CSS

@supports (display: grid) {

  .grid {
    display: grid;
    grid-gap: 1.5vw;
    min-height: 100vh;
    padding: 1.5vw;
  }

  .grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 50vh 30vh repeat(7, minmax(20vh, 1fr));
    grid-template-areas:
      "hero   hero"
      "big1   big1"
      "med1   med1"
      "med2   med2"
      "small1 small2"
      "small3 small4"
      "small5 small6"
      "small7 small8"
      "small9 small10";
  }

  @media screen and (min-width: 750px) {
    .grid {
      grid-template-columns: repeat(5, 1fr);
      grid-template-rows: repeat(5, 25vh);
      grid-template-areas:
        "hero   hero   hero   med1   med1"
        "hero   hero   hero   med2   med2"
        "big1   big1   big1   big1   big1"
        "small1 small2 small3 small4 small5"
        "small6 small7 small8 small9 small10";
    }
  }

  @media screen and (min-width: 1400px) {
    .grid {
      grid-template-columns: repeat(6, 1fr);
      grid-template-rows: auto;
      grid-template-areas:
      "small1 hero   hero hero med1   med1"
      "small2 hero   hero hero med2   med2"
      "small3 small5 big1 big1 small7 small8"
      "small4 small6 big1 big1 small9 small10";
    }
  }

  .grid .item:nth-child(1)  { grid-area: hero; }
  .grid .item:nth-child(2)  { grid-area: big1; }
  .grid .item:nth-child(3)  { grid-area: med1; }
  .grid .item:nth-child(4)  { grid-area: med2; }
  .grid .item:nth-child(5)  { grid-area: small1; }
  .grid .item:nth-child(6)  { grid-area: small2; }
  .grid .item:nth-child(7)  { grid-area: small3; }
  .grid .item:nth-child(8)  { grid-area: small4; }
  .grid .item:nth-child(9)  { grid-area: small5; }
  .grid .item:nth-child(10) { grid-area: small6; }
  .grid .item:nth-child(11) { grid-area: small7; }
  .grid .item:nth-child(12) { grid-area: small8; }
  .grid .item:nth-child(13) { grid-area: small9; }
  .grid .item:nth-child(14) { grid-area: small10; }

}

/* flexbox fallback is the browser does not support display:grid...