Spacing and nesting of UI elements: Use ReferenceRect to show size!?

Question

I'm new to Godot and try to wrap my head around layouts using the UI nodes. For my current experiment I try to build a matrix of ColorRect nodes. To do so, I use GDScript to create some HBoxContainers and add some ColorRect children to each of them. Then I wrap the HBoxContainers in a VBoxContainer.

This works fine so far, but the matrix is not aligned as I would have expect it. I would like to see a border around my controls to see their actual size. Somebody recommended to use a ReferenceRect, so I created one and made my matrix (i.e. the "root" VBoxContainer) a child of ReferenceRect.

I did not saw the ReferenceRect until I manually set its size. I would have expected it to get the same size as its children automatically. But it did not.

Could somebody explain what I missed or misunderstood?

Argos

Answer 1

ReferenceRect is not a container. You'd have to add it more as a sibling to match the VBox, for example a Margin Container that contains both the VBox and RefRect.

You absolutely cannot learn Godot UI from a CSS/HTML/etc background, because it works too differently, you must learn it from the docs

Dimetric