Chakra Card组件垂直排列而非水平排列，如何实现响应式每行3张卡片？

问题原因 #

你把<SimpleGrid>组件放在了data.map循环内部，相当于每张卡片都单独套了一个独立的3列网格容器，自然无法实现多张卡片在同一行排列的效果。

修复代码 #

把SimpleGrid移到map循环外层作为所有卡片的公共容器，同时通过columns属性传断点数组实现响应式列数调整，修改后代码如下：

return (
  <SimpleGrid columns={[1, 2, 3]} spacing={6} py={6} px={10}>
    {data.map((item: ICard, index: number) => (
      <Box
        key={index}
        maxW="445px"
        w="full"
        boxShadow="2xl"
        rounded="md"
        p={6}
        overflow="hidden"
      >
        <Box
          h="310px"
          bg="gray.100"
          mt={-6}
          mx={-6}
          mb={6}
          pos="relative"
        >
          <div
            style={{
              height: 310,
              width: "100%",
              backgroundImage: `url(${item.edmIsShownBy ?? item.edmPreview})`,
              backgroundSize: "cover",
              backgroundPosition: "middle",
            }}
          ></div>
        </Box>
        <Stack>
          <Text
            color="green.500"
            textTransform="uppercase"
            fontWeight={800}
            fontSize="sm"
            letterSpacing={1.1}
          >
            {item.dcCreator ?? searchTerm ?? "未知创作者"} {item.year}
          </Text>
          <Heading fontSize="2xl" fontFamily="body">
            {item.title}
          </Heading>
          <Text color="gray.500" noOfLines={4}>
            {item.dcDescription ?? item.dcDescriptionLangAware}
          </Text>
        </Stack>
        <Stack mt={6} direction="row" spacing={4} align="center">
          <Avatar
            src={item.edmPreview ?? item.edmIsShownBy}
            alt="作者头像"
          />
          <Stack direction="column" spacing={0} fontSize="sm">
            <Text fontWeight={600}>
              {item.dataProvider}, {item.country}
            </Text>
            <Text color="gray.500" noOfLines={3} mx={1}>
              可在 <a href="url">{item.source ?? item.edmIsShownAt}</a> 查看 {item.title ?? "该作品"} 详情
            </Text>
          </Stack>
        </Stack>
      </Box>
    ))}
  </SimpleGrid>
);

调整说明 #

• columns={[1,2,3]}对应Chakra默认断点规则：小屏（宽度<30em）每行1张卡片，中屏（30em≤宽度<48em）每行2张，大屏（宽度≥48em）每行3张，你可以根据需求调整数组对应的列数。
• 移除了背景图div写死的445px宽度，替换为100%适配外层容器，避免破坏响应式拉伸效果。
• 把原来的左边距ml={10}换成了左右内边距px={10}，避免网格容器偏移导致右侧内容裁切。

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