Dynamically resizing grid cells to fit the available space

I am trying to design a grid whose cells will expand to fill the available space left in a row.

The cells’ default/minimum size should be 100x100 pixels. If only one cell can fit per row, then that cell should take up the entire row. If two can fit, each should take up 50% of the row. If three can fit, then 33%, etc…

Is what I’m trying to do possible without scripting? Probably not, but I want to make sure before I start writing a script.

3 Likes

could you give more context?

I also don’t see how this would be possible without scripting, maybe post it in

#help-and-feedback:scripting-support

2 Likes

What other context do you need?

1 Like

What type of grid?

2d? 3d? 2d within a 3d environment?

is this UI?

what if the row is 150? Are half-cells allowed?

What defines how many cells can fit per row if the cells expand?

if I had a 300x300 grid space, would that be 9 100x100 cells or one expanded 300x300 cell?

what type of rows?

2 Likes

it is possible (if we are talking about gui for the player interface)
just add the elements and you should be done
need some adjusts on the proportions ( to your liking )
ScreenGui
└── GridFrame < this is just a normal ‘‘Frame’’ , just call it MainFrame or something
├── UIGridLayout <<< this you need to adjust
├── Frame (Cell) – This can be Text, Frame, Images, Etc
│ └── UIAspectRatioConstraint
├── Frame (Cell)
│ └── UIAspectRatioConstraint
├── Frame (Cell)
└── UIAspectRatioConstraint

This is UI, 2D.

If the row is 150 pixels wide then only one cell could fit, and it would expand to fill the extra 50 pixels.

How many cells can fit is defined by their original size (100 pixels wide), so a 250 pixel wide grid would fit 2 cells per row, each one gaining an extra 25 pixels.

As stated in my original question, the cells are expanding to fill their rows only. A row is horizontal, a column is vertical.

In your example scenario, it depends on how many cells there are. But no matter what, a cell would not increase its height.

Here is an example of what should happen.