Skip to content
datasquares.aiSign inStart free

Build Dashboards

Layout & productivity tools

The canvas is built for fast, precise layout work — most of these tools exist so a 40-card dashboard doesn’t take an afternoon to tidy.

One bar at the top, on one row at 1440, 1280 and 1024 pixels wide: the name and its menu, undo and redo, Search commands or ask AI, then Comments, the Arrange / Edit / Preview switch with the desktop and phone views, Share, More dashboard actions and Publish. Below 1280 px, Comments and the views wait in the name’s menu. The rail at the left opens Insert, Data, Pages, Layers and Style one at a time, with Versions at its foot. See The editor.

  1. At 1440 px wide the toolbar is a single row: back, the dashboard name, Ask AI, the Arrange / Edit / Preview switch, refresh, page and filter settings, Theme, Export, Share and Publish. Versions and deploy are in the status bar at the bottom.

    At 1440 px wide the toolbar is a single row: back, the dashboard name, Ask AI, the Arrange / Edit / Preview switch, refresh, page and filter settings, Theme, Export, Share and Publish. Versions and deploy are in the status bar at the bottom.
  2. On narrower windows (here 1280 px) the toolbar stays on one row. The layout toggles and Comments fold into the More options menu (the three dots).

    On narrower windows (here 1280 px) the toolbar stays on one row. The layout toggles and Comments fold into the More options menu (the three dots).
  3. At 1024 px wide, More options holds the layout toggles and Comments.

    At 1024 px wide, More options holds the layout toggles and Comments.
  4. Desktop view and Mobile view switch the preview between the two layouts of the dashboard.

    Desktop view and Mobile view switch the preview between the two layouts of the dashboard.

Arrange, align and layer cards, step by step

Section titled “Arrange, align and layer cards, step by step”

Arrange mode, the quick bar for several cards, and Layers on the rail.

  1. Switch to Arrange to move and resize cards. Drag a card to move it and drag its corner to resize; guides show when edges line up.

    Switch to Arrange to move and resize cards. Drag a card to move it and drag its corner to resize; guides show when edges line up.
  2. Select several cards with Shift-click, or drag a box round them. Align, distribute and match-size tools appear for the selection, and Group keeps cards moving together.

    Select several cards with Shift-click, or drag a box round them. Align, distribute and match-size tools appear for the selection, and Group keeps cards moving together.
  3. The Layers tab lists every card on the page. Use it to select a card that is hidden behind another, and to bring cards to the front or send them back.

    The Layers tab lists every card on the page. Use it to select a card that is hidden behind another, and to bring cards to the front or send them back.

Every card’s Layout tab has numeric X / Y / W / H inputs in grid units — type exact values instead of nudging. 24 columns, a pill at the canvas’s foot (Condensed grid (24 columns) in Ctrl K), switches the page between the standard 12-column grid and a condensed 24-column grid when you need finer placement.

While dragging or resizing, smart alignment guides appear whenever an edge or center lines up with another card, and snap you to it.

Choose how the canvas handles card placement:

  • Free overlap (a pill at the canvas’s foot) — cards can overlap freely, ideal for floating callouts or placing KPIs directly over background shapes.
  • Overlap-off mode — enforces collision boundaries. When you drop or resize cards, the canvas calculates smart nearest-free placement to prevent accidental clobbering.

Shift-click or Ctrl-click a card to add it to the selection, or to take it out (on a Mac, ⌘-click: there Ctrl-click opens the right-click menu). Drag a marquee box to select several cards (hold Shift or Ctrl to add to a selection; catching one card of a group selects the whole group), or press Ctrl+A for every card on the page. The same rules hold on every canvas: see Right-click menus and selecting several things.

With several cards selected, their quick bar above them leads with Align left, Align top, Match size and Group (Ungroup when they are already one group); More actions holds the rest. Right-click one of them for the same commands, with the alignments folded under Align and the sizes under Match:

  • Align — left, right, top, bottom, center horizontally, center vertically.
  • Distribute — even horizontal or vertical spacing across cards.
  • Match size — match width, match height, or match both dimensions.
  • Group (Ctrl+G) — bundle cards into a single group that moves together, each card keeping its own size. Grouping cards from different groups merges them into one: groups don’t nest. Ungroup (Ctrl+Shift+G) takes apart every group the selection touches.

On the quick bar, ← and → move between its buttons, and Esc goes back to the cards. Ctrl K finds each of them by its name.

A group selects as one: a click on any of its cards selects the whole group. Click one of its cards again, or double-click it, to pick that card out of the group and open its Card settings; Esc goes back to the whole group. Right-clicking a card of a selected group offers Ungroup and Select this card first. A drag or the arrow keys move the whole group, which stops whole at the grid’s edge; a card picked out of it moves alone. Copy, Cut, Duplicate, Lock and Hide take the whole group, and a group copied or duplicated arrives as a new group. The phone layout ignores groups: in Phone view each card moves on its own.

Say the Retail sales dashboard has a KPI row for Europe — Revenue, Orders and Average order value — under its heading. Select the four cards, press Ctrl+G, and the row moves as one when you drag it under the map. To change the Orders card’s number format, click it once more: its Card settings open, and Esc brings back the row.

  • Ctrl+C and Ctrl+V copy and paste cards — including across pages.
  • Duplicate clones selected cards in place.

Copy one card’s look and paste it onto others: choose Copy format (Ctrl+Alt+C) in the card’s quick bar’s More actions, its right-click menu or its Card settings, then select another card, or several, and choose Paste format (Ctrl+Alt+V) in the same places.

The painter copies formatting only: colors and palette, fonts, header style, background, borders and shadow, legend, gridlines, axis styling and scale, number formats, data labels, and conditional-formatting rules. On an image card it copies the picture’s look (its colours, filter, opacity, shape, border and shadow) and its fit, which paste onto image cards only. It never changes what a card shows — its fields, data model and filters stay as they are — and it leaves behind the settings that belong to the card rather than to its look:

  • its title and subtitle, and its axis titles;
  • Top N, a dual axis and the column count of small multiples, which change what the chart shows;
  • a filter card’s control type (List, Dropdown, Number range or Date range) and its Allow multiple selections;
  • its Click behavior and its card controls;
  • the visual its tooltip shows;
  • a table’s per-column settings and a pivot table’s per-measure settings;
  • an image’s alt text, and its crop, turn and flips (a look that makes a picture a circle crops it to the largest square in it, centred, as choosing Circle does);
  • an AI chart’s saved picture.

A filter card’s other Filter control settings — Sort values, Include time (timestamp fields) and Hide title — carry over when the card you copied sets them.

Layers, on the rail, lists every card on the page, the one on top first. Click a row to select its card — the way to reach a card hidden behind another — or Shift- or Ctrl-click to add it to the selection. Double-click a row to rename its card. Each row’s buttons show when you point at it, focus it or select it (and always on a touch screen):

  • Lock position — the card can’t be moved or resized until you unlock it.
  • Hide — takes the card off the dashboard viewers see, until you choose Show.
  • Rename, and Delete, which asks first.

A group is a folder row, named Group 1, Group 2 and so on until you rename it, with its cards under it. Click the folder to select the whole group (Shift or Ctrl adds it to the selection); click a card under it to pick that card out of its group. The folder’s buttons act on the whole group: Lock the group (or Unlock the group), Hide the group (or Show the group), Rename (a blank name gives back Group n) and Ungroup.

The list works from the keyboard: arrow keys move between cards, Space adds a card to the selection or takes it out, Enter selects it alone, F2 renames it, Del deletes it, and → reaches its buttons — see Keyboard shortcuts.

Z-order applies when Free overlap is on and cards can stack. Right-click a card and open Order for Bring to front, Bring forward, Send backward and Send to back, or press Ctrl+] / Ctrl+[ to move the selected cards one layer up or down — with Shift, all the way. The quick bar’s More actions has the same four, for one card or several.

Configure canvas-level geometry in Page settings (Style on the rail → Page background and size…):

  • Canvas width — choose full-bleed or set a fixed max-width (e.g. 1200px, 1400px) with centered layout for clean reading on ultra-wide monitors.
  • Background styling — set canvas background colors or layered background images with custom opacity.
  • Padding — configure uniform outer padding around the canvas grid.

Desktop view and Phone view, beside the mode switch (in the name’s menu below 1280 px), switch between desktop and phone authoring. The phone view uses its own 6-column phone grid:

  • Cards you position in mobile view keep their authored placement.
  • Cards you haven’t touched stack full-width in reading order below the authored ones.
  • If you never author mobile at all, the dashboard falls back to a clean automatic reading-order stack.

To reset a hand-authored phone layout, switch to Phone view and choose Reset to auto, a pill at the canvas’s foot — every card returns to the automatic stack. The pill appears once at least one card has a hand-placed phone position.