responsive grid in chakra ui

Question

I want to make grid with four columns where every element will have the same width but height according to content inside of it. To understand better you can go to Google Keep where notes have same width and different height.

<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>

The problem is that Box components have the same height

Answer 1

columns={{ base: 1, md: 2, md: 3 }}