reactjs - 脉轮 ui 中的响应式网格

Question

我想制作具有四列的网格，其中每个元素将根据其中的内容具有相同的宽度但高度。为了更好地理解，你可以去 Google Keep 那里的笔记有相同的宽度和不同的高度。

<SimpleGrid columns={[1, 2, 3, 4, 5, 6]} gap={5}>
   <Box>
      <Text as='h5' isTruncated fontWeight='bold' fontSize='large'>
        {note.title}
      </Text>
      <Text>{note.text}</Text>
    </Box>
</SimpleGrid>

问题是 Box 组件具有相同的高度