Grid layout is the most commonly used layout in web dynpro ABAP, because it has very good options to arrange screen elements (UI elements), by using grid layout we can specify column count, padding etc.
Step1: Go to transaction SE80, create a web dynpro component ZSAPN_GRID_LAYOUT and save it in a local object.
Step2: Go to main view, go to context create a node KNA1 with four attributes.
Step3: Insert a group container, go to layout, right click on rootuielementcontainer -> insert element, provide id as G1, type as 'Group' and enter.
Step4: Right click on group G1 -> create container form, click on context, select KNA1, select 'GridLayout' and enter.
Step5: Select group, scroll down and you can specify options for column count, cell spacing and cell padding.
