[Grid2] size and gap should work when direction is column or column-reverse

[RunRanger]

Summary

Since V6 Grid became deprecated and Grid2 recommended.

Unfortunately it's not possible to convert from Grid to Grid2 since Grid2 doesn't support the direction property. So no column direction is allowed.

Goal:
Grid2 items can be also arranged in column direction.

Examples

Example with deprecated Grid and new Grid2. Both Grids should look the same but Grid2 can't handle height while direction is set to column:
https://stackblitz.com/edit/stackblitz-starters-6zeyer?file=src%2FApp.tsx

Motivation

Refactor Code from Grid to Grid2

Search keywords: Grid2 Grid direction column

[DiegoAndai]

Thanks for the report, @RunRanger. The direction prop is available in Grid2, although it behaves differently than Grid. Is this what you're referring to, or is it something else?

May I ask you to describe how you're trying to achieve more specifically? Could you provide a minimal reproduction? This would help a lot. A live example would be perfect. This StackBlitz sandbox template may be a good starting point. Thank you!

[RunRanger]

Thank you for your response!

Example with deprecated Grid and new Grid2. Both Grids should look the same but Grid2 can't handle height while direction is set to column:
https://stackblitz.com/edit/stackblitz-starters-6zeyer?file=src%2FApp.tsx

Direction prop doesn't work properly for "column". It's also mentioned in the doku. But since the normal Grid becoming deprecated there's no alternative to replace it with Grid2, because column-direction isn't supported.

[siriwatknp]

@RunRanger Can you explain the need for using Grid with direction column? In my opinion, the Grid should always be row (with its limitation). If you want to fill the items by row, please consider using CSS Grid with grid-auto-flow: column

[RunRanger]

@siriwatknp Thank you for your response.

It doesn't happen often, but as soon as I don't want a page to be scrollable (fixed height) or elements such as full-screen dialogues or similar, vertical grids are very useful.

Since you can normally also set columns in CSS for grids, my expectation as a user would be that this is also available for the MUI component.

Of course, you could also recreate this yourself with your own CSS. But for me the question arises as to why basic functionalities are restricted with a version upgrade. Also it would be better from a coding point of view if you didn't have to differentiate between row grids and vertical grids.

[aarongarciah]

I'd expect the size prop in Grid2 items to be respected when using column direction, only that the size is calculated vertically instead of horizontally, because the axis has changed. I'd assume this is the mental model for most people. Is there a technical limitation for this? I did a quick test in https://stackblitz.com/edit/stackblitz-starters-hwnzzp?file=src/App.tsx switching width for height in the devtools and it seems to work properly. I'm sure I'm missing more details but I'm curious to know if we could achieve this or we already tried in the past.

[DiegoAndai]

@aarongarciah it could work, the height of the container would have to be set. Adding the new feature and waiting for upvotes labels.

[ZacharyACoon]

How does a "Grid" component fail at providing a simple grid?

https://codesandbox.io/p/sandbox/4ftdsc

[DiegoAndai]

Hey @ZacharyACoon, what are you trying to achieve? If you provide an explanation, we'll be happy to help you.