Unequal column widths for Grid component

[AleenaSA]

This is the sample snippet I've been referring to https://paste.twilio.design/components/grid#stacked-columns-in-a-vertical-layout

While the offset property seems to work, span property doesn't. There's a use-case for us wherein we require one of the cards to be of different width. This could work with, for e.g., a nested grid. Is there a non-hacky solution for the same?

For context:
we need something like this, the bottom card should be half the width. And on smaller screen, it should be displayed last

[TheSisb]

Something like this? https://codesandbox.io/s/paste-starter-template-forked-dccf92?file=/src/index.tsx

The key is to keep the total span and offset to equal 12 columns total, and using responsive values (the array index represents each breakpoint).

[AleenaSA]

hey, no this is not what we're expecting. In the vertical grid, the cards are required to be of different widths
i.e. instead of

something like this

The snippet, with nested grid as a workaround: https://codesandbox.io/s/paste-starter-template-forked-pcgcqg

[TheSisb]

Oh I see. Yeah it's strange, it only works if you provide an offset like this: https://codesandbox.io/s/paste-starter-template-forked-67r4j2?file=/src/index.tsx

I'll make a ticket to investigate further, but passing a 0 offset should unblock you for now