How do I really achieve good UI Scaling on all devices?

The problem I am having is that when scaling UI, I can never get scrollingframes to work how I want them to.

This is how the scrollingframes look normally:

image

VS

This is how they look on an iPhone X:

image

How would I achieve having the same size for each box on all devices while using a UIGridLayout?

How to scale or position same on all devices - Help and Feedback / Art Design Support - DevForum | Roblox

Use Scale, instead of Offset. This will make it scale relative to the container if the element, rather than the pixels on the screen.
While this might solve your problem, this can also make your UI look awful and make it not friendly for mobile players.