How to lay out UI elements using columns

1 min. read

The Balsamiq UI Library has a number of UI elements which are used as containers e.g. Browser Window, iPhone & iPad, Rectangle and Tabs. (Many user interface platforms and pattern libraries offer support for column layout e.g. Google Material Design)

Containers allow you to snap other UI Elements to a grid of columns to help with alignment, and simplify the overall design process. Laying out webpages just got easier!

Align product listings into columns using container elements for clean, consistent layouts

Select any container element on the Canvas and you'll see the column properties in the Property Inspector:

Use column snapping in browser window containers to align text and images neatly.

You can choose 1, 2, 3, 4, 6, 8, or 12 columns. If you select Automatic, we'll choose the appropriate number of columns based on the size of the UI element. You can also specify an Outside margin to center the columns inside the UI element.

Apply automatic column layouts to mobile containers for quick, responsive wireframing.
Author

Alasdair Manson
Alasdair Manson

Customer Success Specialist

Questions or feedback? Email alasdair@balsamiq.com.

Related articles


How to add a background color to any UI element

A trick to add backgrounds to any UI element in Balsamiq.

How to add a blank row to a combobox or menu element

A neat trick to add a blank row to two common Balsamiq UI elements.

How to keep form labels aligned

A neat trick to keep labels in Balsamiq wireframes aligned even after editing them.


Other topics you might be interested in

Our monthly emails will make you better at your job

Get our inside stories on product design, making things people love, and running a business built to last. Delivered once a month to your inbox.