Grid column span stops working upon 13th column

[dremin]

I'm creating a page that is a two-column list of Card components. It looks like a Grid with Columns set with span={6} is the way forward for this, but I find that once I add the 13th column, the span parameter is no longer respected and every item is shown in-line. Is this intentional? How might I do this with an unbounded number of items?

Here is a working example:

<Box overflow="auto" margin="space30">
  <Heading as="h3" variant="heading30">
    Feature Configuration
  </Heading>
  <Grid gutter="space30">
    {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map((i: number) => (
      <Column span={6} key={i}>
        <Box marginBottom="space30">
          <Card padding="space70">
            <Heading as="h2" variant="heading20">
              {i}
            </Heading>
            Hello {i}
          </Card>
        </Box>
      </Column>
    ))}
  </Grid>
</Box>

As soon as the array of items is increased to 13, layout breaks:

<Box overflow="auto" margin="space30">
  <Heading as="h3" variant="heading30">
    Feature Configuration
  </Heading>
  <Grid gutter="space30">
    {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13].map((i: number) => (
      <Column span={6} key={i}>
        <Box marginBottom="space30">
          <Card padding="space70">
            <Heading as="h2" variant="heading20">
              {i}
            </Heading>
            Hello {i}
          </Card>
        </Box>
      </Column>
    ))}
  </Grid>
</Box>

Thanks!

[TheSisb]

Hi @dremin,

The standard desktop grid has 24-pixel gutters and can support up to 12 columns. The outside gutters are removed from the overall width of the grid. [source]

The Grid component caps out at 12 columns.

[dremin]

@TheSisb Thanks! Is there another component that would be appropriate for showing a variable number of cards in columns?

[TheSisb]

You can try to use CSS Flexbox directly:

<Box display="flex" columnGap="space30">
  {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13].map((i: number) => (
      <Card padding="space70" key={i}>
        <Heading as="h2" variant="heading20">
          {i}
        </Heading>
        Hello {i}
      </Card>
    ))}
</Box>

Keep in mind variable window sizes. Forcing so many items side-by-side may look fine in a large browser window but begins to degrade at smaller resolutions.