Layout Basics 
The layout specifies the arrangement of the UI elements in their UIElementContainer. An object of the type Layout can be added to each container. To each child object contained in this container, an appropriate object of the type LayoutData can be added. This LayoutData object specifies the layout properties of the corresponding child - for example, the position in a coordinate system defined by the layout.
Each UI element container aggregates a corresponding layout object that describes how the inserted UI element children are assigned within the container. This type of layout object is a subclass of the abstract base class Layout.
The following layout UI elements are available for arranging the UI elements in a view:
A FlowLayout sequentially arranges the container children. This means that you cannot describe defined line breaks, for example. A FlowLayout depends on the client technology and the size of the browser window.
A MatrixLayout arranges the container children in a tabular format, similar to the GridLayout. You can use the properties stretchedHorizontally and stretchedVertically to specify whether or not the UI elements match the container size. You cannot explicitly define the number of columns, for example, which you can do when using the GridLayout. Instead you assign a MatrixHeadData object to a UI element so this UI element is wrapped. It is a great advantage of the MatrixLayout over the GridLayout that you can easily create consistent layout structures using the provided cell classes.
A RowLayout has a similar behavior to the MatrixLayout. However, it sequentially assigns the UI elements to exactly one column. If you assign a RowHeadData to a UI element, it is exactly this UI element that is wrapped. It is a great advantage of the RowLayout that you can easily create consistent layout structures using the predefined cell classes, which are also provided in the MatrixLayout.
Instead of the GridLayout, use the MatrixLayout whenever possible.
A GridLayout arranges the container children in a two-dimensional grid with a defined column number and any number of rows. Line breaks can be defined. Line breaks are automatically inserted when a UI element is too long to be displayed within one row.