title: How to use grid-template-areas in react inline style?
body: <p>So, I've been playing with <code>css-grids</code> in react when I noticed that <code>grid-template-areas</code> has a bit different syntax which might not be compatible in inline react styles. I'm not using any libraries just plain old react inline styles with style prop. </p>
  
  <p>So what I'm aiming to do is similar to this.</p>
  
  <pre><code>.wrapper {
    display: grid;
    grid-template-columns: 100px 100px;
    grid-template-areas: "header header"
                         "aside main"
                         "footer footer"
  }
  
  .header {
    grid-area: header;
    border: 1px solid red;
  }
  .main {
    grid-area: main;
    border: 1px solid green;
  } 
  
  .aside {
    grid-area: aside
  }
  .footer {
    grid-area: footer;
    border: 1px solid yellow;
  }
  </code></pre>
  
  <p><em>Fidde: <a href="https://jsbin.com/lejaduj/2/edit?html,css,output" rel="noreferrer">https://jsbin.com/lejaduj/2/edit?html,css,output</a></em></p>
  
  <p>The layout is simple, "header" and "footer" covering all the columns and "aside" and "main" covering the half. This is just for demo purpose so I kept it simple.<br>
  Notice particularly how <code>grid-template-areas</code> has multiple values separated just by double quotes.</p>
  
  <p>After some thought I thought we could use arrays in <code>gridTemplateAreas</code> in react inline styles. That didn't seem to work.</p>
  
  <p>I again tried with <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals" rel="noreferrer"><code>template-literals</code></a> which didn't work either.</p>
  
  <p><em>Sandbox: <a href="https://codesandbox.io/s/zx4nokmr5l" rel="noreferrer">https://codesandbox.io/s/zx4nokmr5l</a></em></p>
  
  <p>So, is it just me that's hitting this obstacle or is this not supported yet in react?  </p>
  
  <p>I'd rather not use any extra library or framework in react to achieve this as much as possible.</p>