CODEWITHSUNDEEP
reactjschakra-ui
fpetrakov
fpetrakov

Reputation: 466

responsive grid in chakra ui

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

Upvotes: 0

Views: 13324

Answers (1)

Papucho
Papucho

Reputation: 123

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

Upvotes: 6

Related Questions