title: CSS Grid Layout on iOS, Android - trouble with grid-template-areas
body: <p>See simplified code below. The code is working fine on a windows desktop with chrome (header and footer show side my side on full screen, and on a shrunken screen below 480px, the header is shown below footer).</p>
  
  <p>But Android and iOS devices with chrome (v59) seem to ignore "grid-template-areas" altogether, and display the areas in default (html) order vertically. 
  Is there something wrong with my code? Or is it a limitation on iOS and Android?
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.header {
    grid-area: hd;
  }
  
  .footer {
    grid-area: ft;
  }
  
  .grid {
    display: grid;
    grid-template-areas: "ft" "hd";
  }
  
  @media (min-width:440px) {
    .grid {
      grid-template-columns: 2fr 4fr 4fr;
      grid-template-areas: "hd         hd         ft"
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="grid"&gt;
    &lt;div class=header&gt;Header&lt;/div&gt;
    &lt;div class=footer&gt;Footer&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>