Interface Builder

Appearance

Managing Rows and Columns ​

Type: How-to | Audience: End-user | Goal: Control layout structure

Adding a Row ​

Hover the gap between two rows on the canvas (or above the first row) — a small + button appears. Click it to open the Add row dialog and pick a layout:

LayoutDescription
Full widthSingle column at 100% width
Two columnsTwo equal columns, 50% each
Three columnsThree equal columns, 33% each
Sidebar left25% on the left, 75% on the right
Sidebar right75% on the left, 25% on the right
FormAdds a Form Start + Form End marker pair (hidden when you are already inside a form)

Add row dialog open over the canvas. The dialog lists six layout options stacked vertically with icons and short descriptions: Full width, Two columns, Three columns, Sidebar left, Sidebar right, and Form.

If you need a row with more than three equal columns, start with one of the layouts above and use Add column (see Adding More Columns to a Row below).

Reordering Rows ​

Drag a row up or down on the canvas to reorder it. Areas and form boundaries adjust automatically as the rows move.

Opening Column Settings ​

Each column has a small indicator bar above it that shows the column number and width. Click the indicator bar to select the column and open Column Settings in the right sidebar. You can also open the column's "…" menu on the right side of the indicator bar and pick Settings.

Column Width ​

In Column Settings, the Width control has three modes:

  1. Auto — the column sizes itself automatically.
  2. % — a percentage of the row's width (1 to 100).
  3. px — a fixed width in pixels (minimum 10).

Pick the mode from the Width dropdown, then type in the value.

Column Padding ​

Every column has its own inner padding, set from Column Settings:

  • Padding Top (px)
  • Padding Bottom (px)
  • Padding Left (px)
  • Padding Right (px)

Column Settings panel in the right sidebar for the first column of a Two columns row. The panel shows Padding Top/Bottom/Left/Right fields (all 0 px), the Width control with mode '%' and value 50, the Horizontal Align dropdown set to Left, the Vertical Align dropdown set to Middle, and an 'Apply style to all columns' button at the bottom. The canvas on the left shows the row with both columns and a 1/2 width badge on each.

Column Alignment ​

Two dropdowns in Column Settings control where inside the column its block sits:

  • Horizontal Align — Left, Center, or Right.
  • Vertical Align — Top, Middle, or Bottom.

When the row has multiple columns, click Apply style to all columns at the bottom of Column Settings to copy this column's padding, width, and alignment onto the other columns in the row.

Adding More Columns to a Row ​

Two ways to add a column to an existing row:

  • From the row's "…" menu — open the row's dropdown menu (the three-dot button on the row label) and pick Add column. A new column is appended to the row.
  • From a column's "…" menu — open a column indicator bar's dropdown menu and pick Add column left or Add column right to insert the new column relative to the selected one.

Existing columns keep their widths; the new column is added at Auto width, which you can adjust from its Column Settings.

Row dropdown menu open on a Two columns row. The menu lists Settings, Copy row, Copy to another view (disabled), Add column, and a red Delete option.

Row Padding ​

Rows have their own padding too. Open the row's "…" menu (the three-dot button on the row label) and choose Settings to open Row Settings. You can also click the row label directly. The four Padding Top / Bottom / Left / Right fields apply around all columns in the row.

Moving Blocks Between Columns ​

Drag a block from one column onto another column to move it. The original column becomes empty and the destination column shows the moved block.