css grid - google play store - with fallbacks

by ian_smithz

HTML

<div class="grid-container grid-container--outer">
  <div class="flex-container play-header">
    <div class="logo">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/122932/googplay.png" alt="Google Play">
    </div>
    <div class="flex-container play-header-search">
      <input type="text" class="search-bar" placeholder="Search">
      <button class="search-button"></button>
    </div>
    <div class="inline-helper"></div>
    <div class="flex-container play-store-icons">
      <div class="inline-helper"></div>
      <div class="play-store-icon">
        <!-- Apps Icon -->
        <svg xmlns="http://www.w3.org/2000/svg" fill="#757575" height="24" viewBox="0 0 24 24" width="24">
          <path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/>
          <path d="M0 0h24v24H0z" fill="none"/>
        </svg>
      </div>
      <div class="play-store-icon">
        <!-- Alert Icon -->
        <svg xmlns="http://www.w3.org/2000/svg" fill="#757575" height="24" viewBox="0 0 24 24" width="24">
          <path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"/>
        </svg>
      </div>
      <div class="play-store-icon play-store-icon--avatar">T</div>
    </div>
  </div>
  <div class="sticky flex-container android-tag">
    <svg xmlns="http://www.w3.org/2000/svg" fill="#FFF" height="24" viewBox="0 0 24 24" width="24">
        <path d="M0 0h24v24H0z" fill="none"/>
        <path d="M6 18c0 .55.45 1 1 1h1v3.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5V19h2v3.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5V19h1c.55 0 1-.45 1-1V8H6v10zM3.5 8C2.67 8 2 8.67 2 9.5v7c0 .83.67 1.5 1.5 1.5S5 17.33 5 16.5v-7C5 8.67 4.33 8 3.5 8zm17 0c-.83 0-1.5.67-1.5 1.5v7c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5v-7c0-.83-.67-1.5-1.5-1.5zm-4.97-5.84l1.3-1.3c.2-.2.2-.51 0-.71-.2-.2-.51-.2-.71 0l-1.48...

SCSS

$d-apps-header: 48px;
$d-sidebar-width: 200px;
$d-play-header: 60px;
$d-sidebar-spacing: 50px;
$d-search-bar-height: 30px;
$d-icon: 32px;
$d-sidebar-top-half: 288px;
$d-star-size: 14px;
$d-app-card-width: 160px;
$d-app-card-height: 245px;

$d-medium-dp: 770px;
$d-small-dp: 620px;
$d-xlarge-dp: 1100px;
$d-large-dp: 930px;

$c-background: #EEE;
$c-sidebar-bg: rgba(245,245,245,0.95);
$c-android: #689F38;
$c-text: rgb(115, 115, 115);
$c-ui-search: #4486F8;

$f-regular: "Roboto",UILanguageFont,Arial,sans-serif;

/***************************************/
/** Set up Flexbox and Grid Fallbacks **/
/***************************************/

// No support for flexbox or grid.
.grid-container {
  display: inline-block;
  
  & > * {
    display: inline-block;
    vertical-align: middle;
  }
}

// It supports flexbox, fallback on that.
@supports(display: flex) {
  .grid-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }
}

// Unfortunately CSS Grid in Edge is still super weird.
@supports((display: grid) and (not(-ms-ime-align: auto))) {
  .grid-container {
    display: grid;
    grid-template-rows: $d-play-header $d-apps-header 1fr;
    grid-template-columns: $d-sidebar-width 1fr;
  }
}

// No support for flexbox.
.flex-container {
  display: inline-block;
  
  & > * {
    display: inline-block;
    vertical-align: middle;
  }
}

.flex-container--vertical {
  & > * {
    display: block;
    width: 100%;
  }
}

// It supports flexbox, all is well.
@supports(display: flex) {
  .flex-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }
  
  .flex-container--vertical {
    flex-direction: column;
  }
}

/*****************/
/** Play Header **/
/*****************/

.play-header {
  grid-area: 1 / 1 / span 1 / span 2;
  align-items: center;
  width: 100%;
  height: $d-play-header;
  justify-content: flex-start;
  
  @media screen and (max-width: $d-small-dp) {
    display: none;
  }
}

.logo {
  height:...