Added an overview of the containers subtypes (godotengine#7722)

* Added an overview of the containers subtypes

* converted all images to .webp format

Author: Ymanawat

tutorials/ui/gui_containers.rst

@@ -159,6 +159,46 @@ Mouse wheel and touch drag (when touch is available) are also valid ways to pan
 
 As in the example above, one of the most common ways to use this container is together with a *VBoxContainer* as child.
 
+AspectRatioContainer
+^^^^^^^^^^^^^^^^^^^^
+
+A container type that arranges its child controls in a way that preserves their proportions 
+automatically when the container is resized.
+(via :ref:`AspectRatioContainer <class_AspectRatioContainer>`).
+It has multiple stretch modes, providing options for adjusting the child controls' sizes concerning the container: 
+"fill," "width control height," "height control width," and "cover."
+
+   .. image:: img/containers_aspectratio.webp
+
+useful when you have a container that needs to be dynamic and responsive to different screen sizes, 
+and you want the child elements to scale proportionally without losing their intended shapes.
+
+   .. image:: img/containers_aspectratio_drag.webp
+
+FlowContainer
+^^^^^^^^^^^^^^
+
+FlowContainer is a container that arranges its child controls either horizontally or vertically, 
+(via :ref:`HFlowContainer <class_HFlowContainer>` and via :ref:`VFlowContainer <class_VFlowContainer>`).
+and when the available space runs out, it wraps the children to the next line or column, similar to how text wraps in a book. 
+
+
+   .. image:: img/containers_hflow.webp
+
+useful for creating flexible layouts where the child controls adjust automatically to the available space without overlapping.
+
+   .. image:: img/containers_hflow_drag.webp
+
+CenterContainer
+^^^^^^^^^^^^^^^^^^^^
+
+CenterContainer is a container that automatically keeps all of its child controls centered within it at their minimum size. 
+It ensures that the child controls are always aligned to the center, making it easier to create centered layouts without manual positioning.
+(via :ref:`CenterContainer <class_CenterContainer>`).
+
+   .. image:: img/containers_center.webp
+
+   .. image:: img/containers_center_drag.webp
 
 SubViewportContainer
 ^^^^^^^^^^^^^^^^^^^^