Looking for more detail on Grid custom prop to handle the responsive array

[txrodriguez]

It states that we can use custom props for the responsive array but what are some ways this can be accomplished? I tried <Grid columns={[2, "1fr 1fr"], [3, "1fr 1f"]}></Grid> I've also tried using an if statement but that doesn't work. Not sure how custom props would work. Would like more detail or even example on the docs. Any advice would be appreciated.

[lachlanjc]

Hmm, that should work just fine! What's the CSS you're getting that's not what you expect?

[txrodriguez]

I only end up with the one that's last is the one that works.
<Grid columns={([1, "1fr "], [2, "1fr 1fr"])} sx={styles.container}> {children} </Grid>
So in this case I'll get the 2 columns and when I go to small screen I'll still get the 2 columns. right now I have breakpoints: ["576px", "750px", "1450px"] just for testing purposes.

[lachlanjc]

Ah, we only support one level of nesting. E.g. columns={[2, '2fr 3fr ', '1fr 2fr 1fr 2fr']}