Layout

Layout

Layout controls how the Drag & Drop canvas is sized and how cards are positioned inside it. This is the foundation of the dashboard, because every tab, layer, connector, and visual detail depends on a stable layout.

Use layout settings to choose the canvas size, grid behavior, overlap behavior, and how cards should resize. A wall panel usually benefits from a predictable preset size, while a mobile dashboard often needs responsive layouts.

Canvas size

The canvas can be based on a preset, a fixed custom size, or automatic sizing. Preset sizing is usually the easiest place to start because it gives the editor a stable design surface.

Settings reference

Dashboard setting	YAML setting	What it does	Value possibilities
Storage key	storage_key	Names where the layout is saved.	Any unique text value.
Grid size	grid	Controls the snap grid for moving and resizing cards.	Number. Common values: 10, 20, 40.
Live snap while dragging	drag_live_snap	Makes cards snap to the grid during dragging.	true or false.
Canvas size mode	container_size_mode	Chooses how the canvas size is calculated.	Preset, fixed custom size, or automatic sizing.
Canvas preset	container_preset	Selects a predefined canvas size.	Preset name such as Full HD where supported.
Fixed width	container_fixed_width	Sets the canvas width when using fixed custom size.	Number.
Fixed height	container_fixed_height	Sets the canvas height when using fixed custom size.	Number.
Disable overlap	disable_overlap	Prevents cards from being placed on top of each other.	true or false.
Auto resize cards	auto_resize_cards	Lets DDC help cards fit their visual boxes.	true or false.
Outer grid buffer	outer_grid_buffer	Adds breathing room around the outside of the canvas.	Number.

Good layout practice

Use one clear structure before adding decoration. Align cards to the same grid, keep related controls together, and avoid stacking cards unless the overlap has a clear purpose.