Alignment of ports (shapes) horizontally or vertically with Panel "Auto"

Hi team,

We were trying to add dynamic ports to our diagram referring the example at - https://gojs.net/latest/samples/dynamicPorts.html

The container for the ports in the example uses go.Panel, “Vertical” or go.Panel, “Horizontal” to align the ports next to each other using margin in the itemTemplate.

Can the above behaviour be achieved using go.Panel, “Auto” with margin, alignment or some other property?

P.S. I actually tried above combinations but my ports are getting overlapped with go.Panel, “Auto”.

“Auto” Panels are meant to have an object surround one or more objects. When that main object is a Shape, it can form a border around the other elements of the panel.
https://gojs.net/latest/intro/panels.html

You can set or bind each of the non-main elements’ alignment property in order to arrange it within the available area of that main element. But you would then need to compute those Spot values if you want those elements to avoid overlapping each other. Using a “Horizontal”, “Vertical”, or “Table” Panel is a much easier way to arrange objects without overlapping.