I have a Grid Layout Group as the content of a Scroll Rect. The grid is constrained to 3 columns. What I would like to do is have the grid cells scale their size uniformly across multiple aspect ratios. Basically, I just want to maintain the same spacing between each of the cells and the edges of the screen by adjusting their sizes.
Below is what it currently looks like when running the game in 9:16 and 10:16 aspect ratios. The 10:16 ratio has larger gaps on the sides.
I am not sure how to proceed so all help is appreciated.
There are many threads, answers and links to other sites about this topic if you just google for this.
It might be, that GridLayoutGroup and LayoutElements don’t work that great together…IIRC.
If that was so, you can at least use built-in OnRectTransformDimensionsChange method, which gets called when RectTransform change.
Calculate your element size from the column count, RT width, spacing and padding, then apply it to gridLayoutGroup cell size.
But it probably isn’t that simple, if you now 3x? amount of grid items, what about landscape layout… and so on. Might not be issue if you keep it simple and stick with vertical only.
Something like this (spacing is not good but works for this example):
void OnRectTransformDimensionsChange ()
{
var w = rt.rect.width;
var spacing = gridLayoutGroup.spacing.x;
w -= spacing * 2f;
size = (w / cellsX);
// Optional size limits
// size = size < 32f ? 32f : size;
gridLayoutGroup.cellSize = new Vector2 (size, size);
}