Skip to content

Layouts & Col Span

This page explains how buttons are arranged spatially inside menus.


Direction Layouts (Pie Menus)

Each direction in a Pie Menu has a Layout setting:

Layout What it does
SINGLE One main button. Extra buttons stack below it as sub-buttons.
GRID Buttons arranged in a grid. Control width with the Columns setting.

SINGLE layout

[  Main Button  ]
[   Sub-button  ]
[   Sub-button  ]

Add buttons to a direction and they stack vertically. The first button is the "main" one — displayed prominently; others appear as a sub-list below.

GRID layout

[ Btn ][ Btn ][ Btn ]
[ Btn ][ Btn ][ Btn ]

Set Columns to control how many buttons per row. Use Col Span (below) to make individual buttons wider.


Col Span — Button Width Control

Every button has a Col Span value that controls how wide it is relative to the grid columns.

Col Span Result
0.5 Half a column wide
1.0 One column wide (default)
2.0 Two columns wide
3.0 Three columns wide (full row in a 3-column grid)

Example

A 3-column GRID direction with these buttons:

Button A: col_span = 1.0
Button B: col_span = 1.0
Button C: col_span = 1.0
Button D: col_span = 3.0
Button E: col_span = 1.5
Button F: col_span = 1.5

Result:

[ Button A ][ Button B ][ Button C ]
[          Button D                ]
[   Button E   ][   Button F   ]

How to change Col Span in Preview Mode

In Preview → Edit Mode, drag the right edge of a button left or right to change its Col Span interactively.


Grid Expand Direction

By default, a GRID direction expands downward as buttons are added.

Enable Expand from Top in the direction options to make the grid grow upward instead. Useful for directions near the bottom of the pie where downward expansion would go off-screen.


Layout Menus — Columns

Layout Menus use independent columns. Each column is its own vertical list of buttons.

  • Add columns with + Add Column.
  • Each column has its own header label.
  • Columns sit side by side horizontally.

There is no Col Span for Layout Menu buttons — each button fills the full column width.