Row

The Row block places multiple blocks side by side horizontally. By default, layouts in Engine Awesome stack blocks vertically. Adding a Row lets you break out of that and put fields, buttons, text, or any other blocks next to each other on the same line. Each block inside a Row shares the available horizontal space, and you can control alignment, wrapping, and spacing to get the layout exactly right.

When to use it

• Placing First Name and Last Name fields side by side for a more compact form.
• Showing Save and Cancel buttons on the same line at the bottom of a form.
• Displaying two or three stat blocks or summary cards next to each other on a dashboard.
• Creating a header row with a title on the left and action buttons on the right.
• Putting a label and its value on the same horizontal line in a detail view.
• Laying out address fields (Street, City, State, Zip) horizontally for a single address row.

How to add it

1. Open the layout editor.
2. Click Add Block where you want the horizontal section to appear.
3. Select Row from the block type list.
4. Add blocks inside the Row by clicking Add Block within the Row container - each block you add appears as another column.
5. Use the Row's settings to adjust justification (left, center, right), spacing between items, and wrapping behavior.
6. Save and publish your layout.

Configuration options

• Justification : Align the blocks within the row to the left, center, or right - or spread them out with space between.
• Allow to wrap : When enabled, blocks that don't fit on one line will wrap to the next line instead of overflowing. Important for mobile-friendly layouts.
• Conditional visibility : Show or hide the entire Row based on a field value - same conditions as the Group block (dropdown, radio, yes/no, checkbox).
• Sticky position : Keeps the Row pinned to the top of the viewport while scrolling - useful for a persistent button bar.

Example

You're building a contact creation form and want a compact layout. Instead of stacking First Name, Last Name, and Email address vertically (taking up a lot of vertical space), you add a Row block and place all three fields inside it horizontally. The three fields share the width of the form equally, sitting side by side on one line. Below the Row, you stack the remaining fields vertically as usual. The result is a tighter, more scannable form.

Tips

• Enable "Allow to wrap" if your form will be viewed on mobile devices - otherwise narrow screens will squeeze the columns uncomfortably.
• You can nest a Stack inside a Row column to create more complex layouts - for example, a left column with stacked fields and a right column with a text block.
• For button rows (Save + Cancel), use the Row's justification setting to align both buttons to the right, which is the conventional position for form actions.