How do I use grid-template-areas in styled-components with react?

Question

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?

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 (
    <>
      <GlobalStyle globalProps={globalProps} />
      <ThemeProvider theme={theme}>
        <GridLayout>
          <Nav>Nav Area</Nav>
          <Aside />
          <Main>Main area</Main>
          <Aside />
          <Footer>Footer area</Footer>
        </GridLayout>
      </ThemeProvider>
    </>
  );
}

I do not understand why they flagged this as a duplicate question. The other question is not the same as this one even though they may have a similar solution. — Isaac Pak, Apr 02 '21 at 23:37

Ori Drori · Accepted Answer · 2020-08-30T06:08:45.203

You can't have an area (aside in this case) with "parts" that are placed in unconnected sections of the grid. Create asideLeft and asideRight instead of a single aside area (sandbox):

const GridLayout = styled.div`
  height: 100vh;
  display: grid;
  grid-template-areas:
    "nav nav nav"
    "asideLeft main asideRight"
    "footer footer footer";
  grid-template-rows: 1fr 9fr 1fr;
  grid-template-columns: 1fr 6fr 1fr;
`;

const Nav = styled.nav`
  grid-area: nav;
`;
const AsideLeft = styled.aside`
  grid-area: asideLeft;
`;
const AsideRight = styled.aside`
  grid-area: asideRight;
`;
const Main = styled.main`
  grid-area: main;
`;
const Footer = styled.footer`
  grid-area: footer;
`;

How do I use grid-template-areas in styled-components with react?

1 Answers1