title: How do I use grid-template-areas in styled-components with react?
body: <p>I'm trying to make a grid where I define the areas but the grid layout doesn't work on the screen. I'm not sure how can I debug this. It seems to me that I have defined everything correctly. What I'm missing?</p>
  
  <pre><code>const GridLayout = styled.div`
    height: 100vh;
    display: grid;
    grid-template-areas:
      'nav nav nav'
      'aside main aside'
      'footer footer footer';
    grid-template-rows: 1fr 9fr 1fr;
    grid-template-columns: 1fr 6fr 1fr;
  `;
  
  const Nav = styled.nav`
    grid-area: nav;
  `;
  const Aside = styled.aside`
    grid-area: aside;
  `;
  const Main = styled.main`
    grid-area: main;
  `;
  const Footer = styled.footer`
    grid-area: footer;
  `;
  
  function App() {
    return (
      &lt;&gt;
        &lt;GlobalStyle globalProps={globalProps} /&gt;
        &lt;ThemeProvider theme={theme}&gt;
          &lt;GridLayout&gt;
            &lt;Nav&gt;Nav Area&lt;/Nav&gt;
            &lt;Aside /&gt;
            &lt;Main&gt;Main area&lt;/Main&gt;
            &lt;Aside /&gt;
            &lt;Footer&gt;Footer area&lt;/Footer&gt;
          &lt;/GridLayout&gt;
        &lt;/ThemeProvider&gt;
      &lt;/&gt;
    );
  }
  </code></pre>