Row Layout
Define layout rules for items in a group
Last updated
Define layout rules for items in a group
Last updated
Row layout allows you to layout items in a row or column. It is based on flex box layout.
Row layout is only available for groups.
The following shows setting some group layout options
Select a group and set the Group layout to Row.
With a row layout you can set the vertical alignment, the item spacing and the layout of individual items.
Items in the group can have their own alignment. If an item is in a row or column layout group an additional self-alignment field is available.
Set the alignment to override the group layout alignment.
You may want to remove the group width or height. Using the -height, -width in the additional styles field of the group.
Items are ordered by their order in the layers panel not how they are aligned visually.
Use the row layout (reverse) option to reverse the order of items.
Set the items alignment to top, middle, bottom or baseline to set their vertical alignment.
In the Group layout field select Row or Row (reverse)
Set the spacing in the Group Item spacing field
Set the vertical alignment in the items alignment field
Set the item wrap behavior
Individual items in the group can have their own alignment.
Select the item in the layout group and set the Item Alignment option
The self alignment button has a lot of layout options. See the linked video for some examples.
Use two of the items to size the width and height of the group or use a rectangle for sizing and set the rectangle to Background.
The Layout Group button applies the selected formatting of the group that you have selected. It will distribute the items in the layout group according to the layout rules you've selected directly on the artboard. This alignment happens in Adobe XD and is close but not the same as the alignment in the browser.
By default the column alignment button is available.
Before:
After:
To set a row layout group select a group with items in it. Optionally move the group items to manually size the group or set the size in the width or height fields.
