Question

我试图在定义区域的地方创建网格，但是网格布局在屏幕上不起作用。我不确定该如何调试。在我看来，我已经正确定义了所有内容。我想念的是什么？

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>
    </>
  );
}

Answer 1

您不能有一个区域（在这种情况下为aside），这些区域是“部分”放置在网格的未连接部分中。创建asideLeft和asideRight而不是单个aside区域（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;
`;

如何在带有响应的样式化组件中使用网格模板区域？

1 个答案: