Set up a [Grid container] layout element

Use Area and Columns grid containers to group Freedom UI elements into a rigid layout that can include columns.

Fig. 1 Set up a Grid container layout element

1. Drag a 3 columns layout element to the canvas and open the element setup area.
2. Specify into how many columns to divide the block in the Number of columns parameter. For this example, leave the parameter as is.
3. Click the or button in the Visibility group to make the layout element visible or invisible by default on the page, respectively. For this example, leave the layout element visible.
4. Click Setup conditions in the Visibility group to set up element business rules. For this example, do not add business rules. Learn more about setting up business rules in a separate article: Set up business rules.
5. Set the background color of the container in the Color parameter. For this example, select light orange (#FDEDCC hex code).
6. Set the distance between columns in the Column spacing parameter. For this example, select “Medium.”
7. Set the distance between rows in the Row spacing parameter. For this example, select “Small.”
8. Specify the radii of area corners in the Border radius parameter. For this example, select “Medium.”
9. Set the internal margins in the Spacing group. For this example, leave all margins at “None.”
10. View the unique area code in the page schema in the Element code parameter. The parameter is populated automatically and non-editable.

As a result, Creatio will add a light orange grid container that includes 3 columns to the request page.