Grid,Grid Layout and Responsive Grid Layout- SAPUI5

Grid,Grid Layout and Responsive Grid Layout

Grid: 

• Used to make responsive table-free layouts.
• SAP Fiori utilizes a measuring system using the ‘rem’ unit, which stands for ‘root em’.
• It positions its child controls in a 12 column flow layout. 
• Its children can be specified to take on a variable amount of columns depending on available screen size. 
• With this control it is possible to achieve flexible layouts and line-breaks for extra large-, large-, medium- and small-sized screens, such as large desktop, desktop, tablet, and mobile. 
• The Grid control's width can be percentage- or pixel-based and the spacing between its columns can be set to various pre-defined values.
• Content controls within the layout.
• hSpacing,vspacing,position are to be adjusted as per the requirement.

Grid Layout:

• This FormLayout renders a Form using an HTML-table based grid. This can be a 16 column grid or an 8 column grid. 
• The grid is stable, so the alignment of the fields is the same for all screen sizes or widths of the Form. Only the width of the single grid columns depends on the available width.
• To adjust the appearance inside the GridLayout, you can use GridContainerData for FormContainers and GridElementData for content fields.
• This control cannot be used stand-alone, it just renders a Form, so it must be assigned to a Form using the layout aggregation.
• The GridLayout can be attached to the Form Control in order to arrange the Elements in a cell based Layout. The Form Control consists of a Form on top level which contains several FormContainers with several FormElements in it. According to our layout concept all of these can have LayoutData attached to them.
• In this case you cannot include halfGrid Containers. Within the default Grid the FormContainers you can also place two containers in one row by setting halfGrid true within the respective GridContainerData attached. 
• The FormElements included can then have hCells and vCells set as GridElementData attached to the respective labels and fields in order to get the different arrangements within the grid. 
• You can also add some dummy FormElements in order to get some spare rows or dummy TextViews in order to get some spare cells.
• In addition when using the arrow keys you are able to move up (Arrow Up) or down (Arrow Down) within the Form Fields.

Responsive Grid Layout:

• This can be attached to the Form Control in order to arrange the Elements in a responsive way (see Grid). 
• The size and arrangement of the single elements depends on the size of the screen. 
• The Form Control consists of a Form on top level which contains several FormContainers with several FormElements in it. 
• According to our layout concept all of these can have LayoutData attached to them.
• You can use GridData on FormContainers and the content controls like in the Grid control. So it is possible to influence the linebreaks and size (spans) of the single elements. On FormElements GridData is not supported. To influence the rendering of the Labels and fields GridData must be set for these controls. 
• If no GridData are used on a FormContainer or Control, the ResponsiveGridLayout tries to calculate the linebreaks and spans. If the provided GridData are very complex, this automatism may not bring the expected result. In this case GridData should be set on all affected controls.
• Breakpoints,eampty spans,no of columns,span labels have to be mentioned to obtain required output.

Source: https://sapui5.hana.ondemand.com/