Advanced Control Settings: Grid Child

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 elements place and span (rows/columns) relative to grid. You can set the position settings as Auto, Area or Custom.

1. Auto: You can set the span of column and row 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 to use 2 columns and 1 row, you can set Column span = 2, and Row span = 1. This is similar like to merge cells of a table. 

   
   

    

2. 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. 

   

    

3. 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. 

1. Start: The element is positioned at the top of the cell.
2. Center: The element is positioned at the middle of the cell.
3. End: The element is positioned at the bottom of the cell.
4. Stretch: The element is positioned to fit the cell.

Justify

The Justify property specifies the horizontal alignment for the selected element inside the Grid. 

1. Start: The element is positioned to the start of the cell.
2. Center: The element is positioned to the center of the cell.
3. End: The element is positioned to the end of the cell.
4. 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:

1. Start
2. End
3. Custom – If custom is selected the following options will appear:
   Custom Order – Enter value

Learn more about the Order property here.