Grid and Layout

How the dashboard grid works, how you place elements, and how layouts are organized for different device classes.

The 24-column grid

Zweigen dashboards are based on a 24-column grid. This grid gives you an even foundation for arranging all elements. The number of rows is not fixed. The dashboard grows vertically with its content.

Placing elements

In edit mode, you move elements on the grid with drag and drop. Select an element and move it to the target position. The grid snaps the element into place.

Elements can overlap. That allows more advanced layouts, for example text overlays on charts.

Resizing elements

Drag the lower-right corner of an element to resize it. The minimum size depends on the element type.

Layouts for device classes

Zweigen stores the layout separately for three device classes:

  • Desktop – standard layout that you edit in the browser
  • Tablet – automatically adapted, manually adjustable
  • Smartphone – automatically adapted, manually adjustable

Changes to the desktop layout do not automatically transfer to tablet or smartphone. Switch the device class in edit view to adjust the respective layout.

Recommendations for good layouts

  • Place the most important KPI elements in the upper left, where the eye lands first.
  • Use the full width (24 columns) for trend charts that show development over time.
  • Group 3 to 4 KPI tiles next to each other in one row for a compact overview.
  • Place tables and detailed elements further down, where users intentionally scroll.
  • Keep related elements spatially close so the content relationship stays visible.