PerfectUIGridLayout – Responsive Grid Layout Module

winpol · February 11, 2025, 10:46pm

Features:

Automatic Cell Size Adjustment – Dynamically increases CellSize to maximize horizontal spacing, not wasting space with huge undesired paddings (you can still have UIPadding, if you don’t want the cells to fully touch the sides).
Equal Cell Padding (Scaled) – Adjusts the Y padding to match the X scale, ensuring proportional spacing.
Live Updates – Automatically updates when the container’s size changes or when cells are added/removed in-game.

How to Use:

Download this model.
Insert it into your game.
Place the ModuleScript in ReplicatedStorage (or another location, but update the reference in the LocalScript).
Move PerfectUIGridLayout_Local (found inside the ModuleScript) into the UIGridLayout you want to adjust.
Adjust X_PADDING_SCALE in the LocalScript to set the desired spacing between cells.
Set the CellSize (can be in Scale, Offset, or a mix of both), which will define the minimum size of your cells.
Adjust FillDirectionMaxCells to set the maximum number of cells per row.

Important Notes:

If you’re using UIAspectRatioConstraint or UISizeConstraint, only apply it to the UIGridLayout, not to individual frames, otherwise it won’t work properly.
Ensure CanvasSize is set to {0, 0}, {0, 0}.

Example Setup:

Configuration

Minimum Cell Size: {0.149, 0}, {0.2, 0}
Max Cells per Row: FillDirectionMaxCells = 3

In the LocalScript, I set X_PADDING_SCALE = **0.035**

Result

Final CellPadding: {0.035, 0}, {0.066, 0} → Equal horizontal & vertical spacing
Final CellSize: {0.309, 0}, {0.36, 0} (increased from {0.149, 0}, {0.2, 0}) to fully utilize the frame’s width

Tip: Normally, I would use a `UIAspectRatioConstraint` to maintain the cell ratio, but I left it out in this example for clarity.

Tip 2: You can use a UIPadding, but sometimes, it is buggy, I need to figure out why

Feel free to ask questions!