Make Unity's Grid Layout Group Dynamic/Responsive
I recently worked on a task that involved displaying a list of users with their specific user details in a one column grid. While it is a one column grid, each row is based on a prefab that inherently has 4 columns for specific details. The unexpected challenge was that the Grid Layout Group grid cell does not scale with parent by default and therefore a change in the aspect ratio or screen size pushed the grid outside the bounds of the parent panel, maintaining its initial size and pushing information out of frame. The grid size X is fixed and does not change. No amount of anchor point tweaks worked. I switched to the vertical layout group component hoping that would save the day. That did some good but something the grid layout group gives was missing. Perhaps I do not know how to properly use both components. yh maybe! The script below, together with these three important steps helped me to achieve a super responsive grid layout that scaled the cellsize with the parent grid. Per my setup, the reference resolution is 1920 x 1080 on the canvas scalar. Size and anchor points of the parent object/panel properly set. The script attached to the object with the grid layout group component. using UnityEngine; using UnityEngine.UI; [ExecuteAlways] //for editor [RequireComponent(typeof(GridLayoutGroup))] public class DynamicGridSize : MonoBehaviour { // onrecttransfrom works in both editor and production. // gets triggered when there is a change in parent panel size or screen size [Tooltip("cellsize Y at the reference height")] public float referenceCellHeight = 108f; // set the right cellsizeY at the reference resolution [Tooltip("canvas height, should match the root canvas's scaler reference resolution Y")] public float referenceHeight = 1080f; // set to 1080 cos the project is 1920x1080 private GridLayoutGroup grid; private RectTransform rectTransform; private void Start() { grid = GetComponent(); rectTransform = GetComponent(); UpdateCellSize(); } // onrecttransfrom works in both editor and production. // gets triggered when there is a change in parent panel size or screen size private void OnRectTransformDimensionsChange() => UpdateCellSize(); #if UNITY_EDITOR // OnValidate works only in editor. triggered when values in inspector changes // hence good for visualization private void OnValidate() => UpdateCellSize(); #endif private void UpdateCellSize() { if (grid == null || rectTransform == null) return; float scaleFactor = rectTransform.rect.height / referenceHeight; // rectTransform.rect.width, makes the cellsize x dynamic // referenceCellHeight * scaleFactor, makes the cellsize y dynamic grid.cellSize = new Vector2( rectTransform.rect.width, referenceCellHeight * scaleFactor ); } } I hope somebody finds this useful. Cheers !!
I recently worked on a task that involved displaying a list of users with their specific user details in a one column grid. While it is a one column grid, each row is based on a prefab that inherently has 4 columns for specific details.
The unexpected challenge was that the Grid Layout Group grid cell does not scale with parent by default and therefore a change in the aspect ratio or screen size pushed the grid outside the bounds of the parent panel, maintaining its initial size and pushing information out of frame. The grid size X is fixed and does not change.
No amount of anchor point tweaks worked. I switched to the vertical layout group component hoping that would save the day. That did some good but something the grid layout group gives was missing. Perhaps I do not know how to properly use both components. yh maybe!
The script below, together with these three important steps helped me to achieve a super responsive grid layout that scaled the cellsize with the parent grid.
- Per my setup, the reference resolution is 1920 x 1080 on the canvas scalar.
- Size and anchor points of the parent object/panel properly set.
- The script attached to the object with the grid layout group component.
using UnityEngine;
using UnityEngine.UI;
[ExecuteAlways] //for editor
[RequireComponent(typeof(GridLayoutGroup))]
public class DynamicGridSize : MonoBehaviour
{
// onrecttransfrom works in both editor and production.
// gets triggered when there is a change in parent panel size or screen size
[Tooltip("cellsize Y at the reference height")]
public float referenceCellHeight = 108f; // set the right cellsizeY at the reference resolution
[Tooltip("canvas height, should match the root canvas's scaler reference resolution Y")]
public float referenceHeight = 1080f; // set to 1080 cos the project is 1920x1080
private GridLayoutGroup grid;
private RectTransform rectTransform;
private void Start()
{
grid = GetComponent<GridLayoutGroup>();
rectTransform = GetComponent<RectTransform>();
UpdateCellSize();
}
// onrecttransfrom works in both editor and production.
// gets triggered when there is a change in parent panel size or screen size
private void OnRectTransformDimensionsChange() => UpdateCellSize();
#if UNITY_EDITOR
// OnValidate works only in editor. triggered when values in inspector changes
// hence good for visualization
private void OnValidate() => UpdateCellSize();
#endif
private void UpdateCellSize()
{
if (grid == null || rectTransform == null) return;
float scaleFactor = rectTransform.rect.height / referenceHeight;
// rectTransform.rect.width, makes the cellsize x dynamic
// referenceCellHeight * scaleFactor, makes the cellsize y dynamic
grid.cellSize = new Vector2(
rectTransform.rect.width,
referenceCellHeight * scaleFactor
);
}
}
I hope somebody finds this useful.
Cheers !!
