Add prop to Grid component to allow configuring different column widths

[mjbloch]

Description

It would be very helpful if Grid components had a prop to adjust the width of the columns instead of all being the same width by default. For example, if I wanted to show a BigValue and a DataTable next to each other - these components don't need the same amount of space. The BigValue might only need 25% of the space, while the DataTable could use the other 75%.

What problem would this solve?

Greater dashboard customization and more efficient whitespace utilization.

How should it work?

Something like this would be great:

<Grid cols=2 widths=[0.25, 0.75]>

[archiewood]

This is a great idea.

I wonder if we should also / instead accept ratios

<Grid cols=2 widths={[1,3]} />

[ebardelli]

I also was wondering about this.

Observable Framework has something similar with their grid system. It looks like the way they solve it is by having an explicit sub-container for the grid called a card, and then they allow each card to span multiple rows or columns.

Evidence has the Group prop, which could be updated to take a rows or a cols prop to extend it to multiple rows or columns, for example:

<Grid cols=3>
    <LineChart data={orders_by_category} x=order_month y=orders/>
   <Group span=2>
      Some text
    <BarChart data={orders_by_category} x=order_month y=orders fillColor=#00b4e0/>
   </Group>
</Grid>

could extend the Group prop over 2 columns instead of splitting it over 1 and 1.

I haven't looked at the code, but it should be doable, maybe?

Update

It should be totally doable with the Group prop and Tailwind's subgrid and col-span, if I'm reading the documentation right.

I would call the Group prop col-span, so there is no confusion between it and the Grid property.