If when a control is placed inside in a Grid, the Grid Child settings will be available in the Advanced tab.
Position
The Position settings define the Grid child element's place and span (rows/columns) relative to the grid. You can set the position settings as Auto, Area, or Custom.
Auto: You can set the span of the column and row in which the current elements will place to. Each span means a unit of the column/row. For example, if you want to have the current elements use 2 columns and 1 row, you can set Column span = 2, and Row span = 1. This is similar to merging cells of a table.
Area: If you've defined areas from the parent Grid control, you can choose to place the current elements to one of the defined areas. Imaging that the parent Grid has 4 columns and 5 rows, and you've created 5 areas for the parent Grid as below:
The structure of your Grid now will be organized with Areas like this:
Then you can choose the areas for the child elements by clicking Area from the Position options and select the specific area from the below drop-down list.
Custom: If you want to place the current element to certain cells, you can choose to use the custom option, and select exactly the columns and rows. For example, from column 2 to column 3, and start from row 1 to row 4.
Alignment
The alignment property specifies the vertical alignment for the selected element inside the Grid.
Start: The element is positioned at the top of the cell.
Center: The element is positioned at the middle of the cell.
End: The element is positioned at the bottom of the cell.
Stretch: The element is positioned to fit the cell.
Justify
The Justify property specifies the horizontal alignment for the selected element inside the Grid.
Start: The element is positioned to the start of the cell.
Center: The element is positioned to the center of the cell.
End: The element is positioned to the end of the cell.
Stretch: The element is positioned to fit the cell.
Order
The order is primarily used in combination with the responsive breakpoints. This allows you to order/reorder the elements based on the viewport. (Example: You wish to rearrange three or more elements in mobile view) You may choose between:
Start
End
Custom – If custom is selected the following options will appear:
Custom Order – Enter value