Repeating cards with dynamic data

[shyamajp]

Hello!

I am not sure if it is a bug or I am simply using it wrong but I've noticed when I populate cards by JS map, it won't make space between vertical cards and saw some other weird stuff.

What I want to do:

make equal-height-cards with map in responsive

What I have tried and failed:

1. map + box > keeps margin bottom but does not have equal height anymore
2. map > keeps equal height but not no margin bottom
3. manual repeat > keeps margin but weird height.
   All work well with responsive changes :)

Could you please tell me how I am supposed to do this, to keep margin bottom + equal height + responsive with dynamic data? Thank. you very much in advance!

Sample code

<h1>repeat with map and box</h1>
<Grid gutter='space70' vertical={[true, false, false]} equalColumnHeights>
  {[1, 2, 3, 4].map((i: number) => (
    <Column span={[8, 4, 3]} key={i}>
      <Box marginBottom='space60'>
        <Card padding='space70'>
          <Heading as='h2' variant='heading20'>
            Card Heading
          </Heading>
          <Text as='p'>{'bodybody body bodybody body bodybody body'.repeat(i)}</Text>
        </Card>
      </Box>
    </Column>
  ))}
</Grid>
<h1>repeat dynamically</h1>
<Grid gutter='space70' vertical={[true, false, false]} equalColumnHeights>
  {[1, 2, 3, 4].map((i: number) => (
    <Column span={[8, 4, 3]} key={i}>
      <Card padding='space70'>
        <Heading as='h2' variant='heading20'>
          Card Heading
        </Heading>
        <Text as='p'>Body</Text>
      </Card>
    </Column>
  ))}
</Grid>
<h1>repeat statically</h1>
<Grid gutter='space70' vertical={[true, false, false]} equalColumnHeights>
  <Column span={[8, 4, 3]}>
    <Card padding='space70'>
      <Heading as='h2' variant='heading20'>
        Card Heading
      </Heading>
      <Text as='p'>Body</Text>
    </Card>
  </Column>
  <Column span={[8, 4, 3]}>
    <Card padding='space70'>
      <Heading as='h2' variant='heading20'>
        Card Heading
      </Heading>
      <Text as='p'>Body</Text>
    </Card>
  </Column>
  <Column span={[8, 4, 3]}>
    <Box marginTop='space70'>
      <Card padding='space70'>
        <Heading as='h2' variant='heading20'>
          Card Heading
        </Heading>
        <Text as='p'>Body</Text>
      </Card>
    </Box>
  </Column>
  <Column span={[8, 4, 3]}>
    <Box marginTop='space70'>
      <Card padding='space70'>
        <Heading as='h2' variant='heading20'>
          Card Heading
        </Heading>
        <Text as='p'>Body</Text>
      </Card>
    </Box>
  </Column>
</Grid>

[richbachman]

Hi @shyamajp

Thanks for posting this question here, and providing code examples and screenshots. Your first solution is super close. Because we need to wrap the Card in the extra Box, the Card won't stretch to 100% height by default. In order to solve for that, we can add display="flex" to the box, which make the inner Cards to stretch. Here's a CodeSandbox to show the solution working. I added a comment where I added the display prop.

https://codesandbox.io/s/icy-leaf-m2w5x?file=/src/index.tsx

Let us know if that works for you. Thanks!

[shyamajp]

Hello! This is exactly what I wanted to achieve, thank you very much for making very helpful code sandbox :)