Chakra UI Grid组件子项出现额外空白的原因及布局调整诉求

问题描述 #

我没给各组件设置高度，但Grid子项出现了额外空白，而且nav和footer区域的内容没居中。我的目标是让nav适配min-content，aside占据剩余行空间。以下是App.jsx中的布局代码：

function App() {
  const [courseQuery, setCourseQuery] = useState({});
  return (
    <Grid
      h="100vh"
      gap={2}
      templateAreas={{
        base: ` "main" "footer"`,
        md: `"nav main" "aside main" "footer footer"`,
      }}
      templateColumns={{
        base: "1fr",
        md: "0.3fr 1fr",
      }}
    >
      <Show above="md">
        <GridItem borderRadius={10} p={6} area="nav" bg="gray.800">
          <Nav />
        </GridItem>
        <GridItem borderRadius={10} py={6} pl={6} area="aside" bg="gray.800">
          <Aside/>
        </GridItem>
      </Show>
      <GridItem
        borderRadius={10}
        px={6}
        pt={6}
        area="main"
        bg={{ base: "gray.900", md: "gray.800" }}
      >
        <Stack h="85vh" overflow="auto" spacing={20}>
          <Hero />
          <ProjectGrid />
        </Stack>
      </GridItem>
      <GridItem p={6} area="footer" bg="gray.800">
        <Footer />
      </GridItem>
    </Grid>
  );
}

export default App;

解决方案 #

1. 配置Grid行高，实现nav自适应、aside占满剩余空间

当前Grid未设置行高规则，md断点下的行默认均分高度，导致nav出现多余空白。给Grid添加templateRows配置：

templateRows={{
  base: "1fr auto", // 移动端：main占满剩余空间，footer自适应内容高度
  md: "min-content 1fr auto" // md及以上：nav适配内容高度，aside占满剩余垂直空间，footer自适应
}}

2. 让nav和footer内容居中

给对应的GridItem添加flex布局属性，实现内部内容居中：

• Nav的GridItem修改：

<GridItem 
  borderRadius={10} 
  p={6} 
  area="nav" 
  bg="gray.800"
  display="flex"
  justifyContent="center"
  alignItems="center"
>
  <Nav />
</GridItem>

• Footer的GridItem修改：

<GridItem 
  p={6} 
  area="footer" 
  bg="gray.800"
  display="flex"
  justifyContent="center"
  alignItems="center"
>
  <Footer />
</GridItem>

如果Nav/Footer组件内部有独立布局，也可以直接在组件内设置textAlign="center"这类样式实现居中。

3. 修复main区域固定高度的潜在冲突

当前main里的Stack用了h="85vh"，容易和Grid布局规则冲突，建议改成自适应高度：

<Stack h="100%" overflow="auto" spacing={20}>
  <Hero />
  <ProjectGrid />
</Stack>

修改后的完整代码 #

function App() {
  const [courseQuery, setCourseQuery] = useState({});
  return (
    <Grid
      h="100vh"
      gap={2}
      templateAreas={{
        base: ` "main" "footer"`,
        md: `"nav main" "aside main" "footer footer"`,
      }}
      templateColumns={{
        base: "1fr",
        md: "0.3fr 1fr",
      }}
      templateRows={{
        base: "1fr auto",
        md: "min-content 1fr auto"
      }}
    >
      <Show above="md">
        <GridItem 
          borderRadius={10} 
          p={6} 
          area="nav" 
          bg="gray.800"
          display="flex"
          justifyContent="center"
          alignItems="center"
        >
          <Nav />
        </GridItem>
        <GridItem borderRadius={10} py={6} pl={6} area="aside" bg="gray.800">
          <Aside/>
        </GridItem>
      </Show>
      <GridItem
        borderRadius={10}
        px={6}
        pt={6}
        area="main"
        bg={{ base: "gray.900", md: "gray.800" }}
      >
        <Stack h="100%" overflow="auto" spacing={20}>
          <Hero />
          <ProjectGrid />
        </Stack>
      </GridItem>
      <GridItem 
        p={6} 
        area="footer" 
        bg="gray.800"
        display="flex"
        justifyContent="center"
        alignItems="center"
      >
        <Footer />
      </GridItem>
    </Grid>
  );
}

export default App;

内容的提问来源于stack exchange，提问作者Ryan Bitonio