Allow for a 3x2 grid layout for the GridLayout component

[vandercloak]

Describe the problem

4-6 participants is our use cases sweat spot. At the moment when there are 5-6 participants, it uses a 3x3 grid layout.

Is it possible to allow for a 3x2 grid layout (or allow us to override the GRID_LAYOUTS variable)?

Describe the proposed solution

Allow for the customizing/overwritting of the layouts OR to add this entry to GRID_LAYOUTS

{
    columns: 3,
    rows: 2,
    name: "3x2",
    minTiles: 5,
    maxTiles: 6,
    minWidth: 700,
    minHeight: 0
},

### Alternatives considered

_No response_

### Importance

I cannot use LiveKit without it

### Additional Information

_No response_

[Ocupe]

Hi @vandercloak, I agree with you, which is why we changed this a while ago. Are you on the latest version? We added a pure CSS solution https://github.com/livekit/components-js/commit/fd776c36b9857ae8a1029131148ac73ae11c2df3. You can get the desired behaviour by changing one line. Let us know if this works for you?

[vandercloak]

This is great news. I will try it out today. Thanks @Ocupe for getting back to me so quick!

[vandercloak]

@Ocupe Is there any fix for this for the react version of live kit?

"@livekit/components-core": "^0.10.2", "@livekit/components-react": "2.3.2", "@livekit/components-styles": "1.0.12", "livekit-client": "2.2.0",

[Ocupe]

It should work when you update the @livekit/components-styles package. You can see it in action in the Meet application. Make sure your grid has the correct CSS properties applied to it (like here).