How do I join / fix frames with another frame that can scale along with it?

[Flonkify (Flonk)]

Hi, I’m a complete GUI newbie and I need your help to create these 3 frames (marked in red) underneath the “Canvas” frame (they will end up being sliders) that stay fixed and scale along with it when I resize the viewport.

The “Canvas” frame here already gets resized with the viewport thanks to a script that I had to write due to a very unique use-case that I got help with here: How do I scale a fixed size GUI to fit within screen/resolution?

The script (that you can hopefully ignore) looks like this:

local camera = workspace.CurrentCamera
local canvasWidth = script.Parent.Parent.Size.X.Offset

-- First time setup:
local function scale()
	local screenSize = camera.ViewportSize
	local smallest = screenSize.X

	if screenSize.Y < smallest then
		smallest = screenSize.Y
	end

	script.Parent.Scale = (smallest / canvasWidth) / 1.2
end

-- Setup for the first time:
scale()

camera:GetPropertyChangedSignal("ViewportSize"):Connect(function()
	scale()
end)

I hope some GUI trickery can be achieved here instead so that I don’t have script them as well.

The slider frames that I want fixed underneath the “Canvas” frame are meant to manipulate the environment of my engine. Here’s what the resize script does:

Please let me know if you need any additional information.

[Flonkify (Flonk)]

I managed to solve it with a very simple solution and I feel really silly now . I had to make an extra inner canvas frame for main logic so that I could add other frames such as the slider frames inside the main canvas. Now I can exclude those from the UIGridLayout while still inheriting the resize functionality from my script.