Chakra-ui中Simple Grid组件失效，多种尝试无果求助

核心问题定位 #

你代码里的Simple Grid组件属性写错了：column={2}是错误写法，Chakra UI的Simple Grid控制列数的正确属性是columns（末尾多一个s）。这个拼写错误会导致组件无法识别你要设置2列的需求，自然布局不符合预期。

修复步骤 #

1. 修正列数属性
   把column={2}改为columns={2}，这是解决问题的关键。

2. 优化子元素尺寸适配
   你给内部Box设置了固定宽度w={"20vw"}，可能和网格列的宽度冲突。建议改成w="100%"让子元素自适应网格列的宽度，避免布局撑开变形：

<SimpleGrid w={"90vw"} columns={2} spacing={10}>
  {result.data.map((e) => (
    <Box w="100%" key={e.id}>
      <Item title={e.title.slice(0, 25) + "..."} src={e.images.original.mp4} />
    </Box>
  ))}
</SimpleGrid>

3. 可选：添加响应式适配
   如果需要适配不同屏幕尺寸，可以用Chakra的响应式语法设置列数，比如移动端1列，平板及以上2列：

<SimpleGrid w={"90vw"} columns={{ base: 1, md: 2 }} spacing={10}>
  {/* 子元素代码 */}
</SimpleGrid>

额外检查点 #

如果修复后还是有问题，检查<Item>组件内部是否有超出容器宽度的内容，比如视频、长文本等，可以给Item添加overflow="hidden"或者maxWidth="100%"来限制内容尺寸。

内容的提问来源于stack exchange，提问作者Aryan Rajput