Chakra UI响应式网格实现同宽自适应高度（类似Google Keep）问题求助

问题原因 #

你当前使用的Chakra UI SimpleGrid 底层基于CSS Grid实现，默认规则下同一行内所有网格项的高度会统一对齐，由该行内容最多的元素高度决定，因此所有Box组件高度被强制撑平，无法实现随内容自适应的错落效果。

解决方案 #

根据你需要的效果可以选择以下两种实现方式：

方案1：Flex布局实现（简单通用，适配大多数类Google Keep场景） #

该方案同一行高度由该行最高元素决定，不同行高度独立，元素高度完全随内容自适应：

<Box display="flex" flexWrap="wrap" gap={5}>
  {notes.map((note, index) => (
    <Box 
      key={index}
      // 响应式控制不同屏幕下的宽度占比，对应1/2/3/4列布局
      flex={["1 1 100%", "1 1 calc(50% - 10px)", "1 1 calc(33.33% - 10px)", "1 1 calc(25% - 15px)"]}
      minWidth="200px"
    >
      <Text as='h5' isTruncated fontWeight='bold' fontSize='large'>
        {note.title}
      </Text>
      <Text>{note.text}</Text>
    </Box>
  ))}
</Box>

方案2：Column瀑布流实现（完全错落无空白，和Google Keep效果完全一致） #

该方案实现真正的瀑布流布局，短内容会自动填充上方空白，不会出现行底部留白：

<Box 
  // 响应式控制列数，对应1/2/3/4列布局
  columnCount={[1, 2, 3, 4]}
  columnGap={5}
>
  {notes.map((note, index) => (
    <Box 
      key={index}
      mb={5}
      breakInside="avoid" // 防止单个笔记被拆分到两列显示
    >
      <Text as='h5' isTruncated fontWeight='bold' fontSize='large'>
        {note.title}
      </Text>
      <Text>{note.text}</Text>
    </Box>
  ))}
</Box>

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