Row Layout
Define layout rules for items in a group
Last updated
Was this helpful?
Define layout rules for items in a group
Last updated
Was this helpful?
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.
Set the alignment to override the group layout alignment.
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.
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.
You may want to remove the group width or height. Using the -height, -width in the field of the group.
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 .
