Modified on Wed, 22 Jun 2022 at 10:19 AM

The Layout section deals with how the direct children of the selected element (the elements that you can see in this container in the Flow panel) are aligned. It is divided into five parts: Mode, Alignment, Spacing, Wrap, and Reverse Direction.


Mode determines the direction in which the children are set. There are three options for direction: Column (indicated by three vertical dots), Row (indicated by three horizontal dots), and Grid (indicated by an incomplete grid).

Column will align children elements vertically within the parent. Row will align children horizontally within the parent. The following gif should help illustrate the results:

Grid allows you to specify the number of columns you want in your layout, and indicate how much blank space you want between each column and row. The following gif should help illustrate the results:


Alignment determines where the elements default to on the page. This defaults to center. 


When packed is selected, it means that elements will be aligned as closely as possible allowing for the number of pixels indicated under Spacing between each element. 

When Space Between is selected, the children will spread out as much as possible within the Alignment selected above. You will see the Alignment change to highlight this.


If an element's size is greater than the space allotted for it in its parent, wrap will determine where the overflow goes. If Wrap is set to No, it will go offscreen. If Wrap is set to Yes, it will appear in the next line. 

Reverse Direction

This attribute determines the order in which elements will appear on screen.

Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select atleast one of the reasons

Feedback sent

We appreciate your effort and will try to fix the article