display: contents not working as descibed

[nhugh406]

``While trying to use a "custom" react component that handles grid layout, the docs state to use the display: contents attr if adding a "wrapper" around the child creates layout woes. In doing so, it still appears to mess with the layout AND does not animate.

Example:

<Grid sm={3} lg={11} gap="md">
  <XyzTransitionGroup appear xyz="fade left stagger">
    {featuredSubscriptions.map(sub => (
      <div key={sub.key} style={{ display: 'contents' }}>
        <Column lgStart={getColumnStarts(sub.subtype)} lgSpan={3}>
          <FeaturesCard
            img={getImage(sub.subtype)}
            currencyId={currencyId}
            title={featuresPricing[sub.subtype].title}
            term={sub.term}
            monthlyPrice={sub.monthlyprice}
            billingAtPrice={sub.price}
            sku={sub.value}
            features={featuresPricing[sub.subtype].features}
            btnText={btnText}
            handleCardClick={handleCardClick}
          />
        </Column>
      </div>
    ))}
  </XyzTransitionGroup>
</Grid>

This yields an 11 column grid with the first column starting in position 2. In fact, what happens is each column subsequently uses only 1 column worth of available space even when the specified span at the lg breakpoint is set to 3.

what am i missing?

[mattaningram]

Can you setup a codesandbox or something similar to help debug? Since you are using some custom React components here it is difficult to determine what exactly the issue might be. Another way to help might be to copy the generated HTML into a Codepen or sandbox.

A few questions that might help:

• Why do you need to wrap the Column element in a div? Can you map over the Column elements and put the key directly on them?
• Can you avoid using the custom layout elements and just use className and regular CSS? That way you might be able to avoid needing wrapping elements and the grid styles can go directly on the element generated by the XyzTransitionGroup.