# Resizable card grid > Different viewers care about different numbers and want to arrange them. - Canonical: https://patterns.konigi.com/dashboards/resizable-card-grid - Group: Page layout - Level: context - Status: published - Updated: September 10, 2026 - Also called: draggable widgets, customizable layout --- ## Problem Six people use this page and each of them wants a different panel at the top. Every request to reorder it is reasonable, and satisfying any one of them makes the page worse for the other five. ## Solution Let viewers arrange it themselves. Panels become cards that can be dragged, resized, added and removed, with the arrangement saved per person. The appeal is obvious and the pattern is more often a mistake than not, so the honest version of this entry is mostly about when it goes wrong. The first cost is that a personalised page cannot be talked about. "It's the panel in the top right" stops meaning anything, which matters most during incidents, when a shared vocabulary is worth more than any individual's preferred arrangement. A team looking at six different dashboards while calling it "the dashboard" is a real and specific failure. The second is that most people never customise, so the default layout is still what almost everyone sees, and it now receives less design attention because customisation is the answer to any complaint about it. The feature quietly lowers the quality of the thing 90% of people use. The third is that arrangements fossilise. Someone lays out a page in March, the system changes in June, and their saved layout still has the old panels in the old order with no prompt to reconsider. Nothing in the product knows their arrangement has stopped describing the system, so the staleness is invisible to everyone including them. Where it genuinely fits is a page serving genuinely different jobs with no shared reading, and where the arrangement is the only difference. If the differences run deeper than layout—different metrics, different scope—separate dashboards or saved views serve better and keep each one designed. ## Use when The audience is genuinely heterogeneous, the panel set is stable, and no shared reading of the page is required. ## Don't use when The page is used collaboratively, especially in incidents. Also don't use it as a way to avoid deciding what the page is for; customisation is not a substitute for editorial judgement, and it is frequently deployed as one. ## Trade-offs Drag-and-drop layout is expensive to build well and worse than useless when built badly, since a page that reflows unexpectedly during a drag loses trust immediately. Layouts made on one screen size rarely work on another. Per-viewer state has to be stored, migrated and eventually deprecated. And an editable page invites accidental edits: dashboards get rearranged by people who meant to scroll, and the undo path is usually missing. ## Checklist - Does anyone need to talk about this page with someone else looking at it? - What proportion of viewers actually customise, and how do you know? - Is the default layout still receiving design attention? - Does a customised layout survive a change to the panel set? - Is a viewer prompted when their saved layout references something removed? - Can a viewer reset to the default in one action? - Does layout editing require an explicit edit mode, or can it happen by accident? - Is there an undo? - Does a layout made on a wide screen work on a laptop? - Would saved views or separate dashboards serve these audiences better? ## Compare **Grafana** makes every dashboard editable by anyone with permission, so the arrangement is shared rather than personal and edits are changes to a common artefact, which trades personalisation for a shared vocabulary. **Datadog** offers both editable dashboards and personal starred views, keeping the shared page canonical while letting individuals collect what they need elsewhere. **Kibana** leans furthest into free arrangement of cards, each carrying its own query, which is flexible and puts all coherence on the author. **Public status pages** are the deliberate opposite, with no customisation at all, because a page read by strangers must look the same to everyone. ## Related Panel grid is the underlying layout system, and the entry that covers why a fixed grid encodes priority. Saved view is usually the better answer to the same need. Dashboard builder is the authoring pattern this is a subset of. Semantic grouping is the editorial work customisation is often used to avoid. Multi-page dashboard is the alternative when the audiences differ by more than arrangement. ## Examples ### Home Assistant (Open Home Foundation) A card grid people genuinely rearrange, on a wall tablet, which is where resizable layouts either work or quietly stop describing the house. **Demo dashboard at phone width** — captured September 10, 2026, Home Assistant public demo (signed out, 390px viewport). personal, medium density, light theme, mobile. The same dashboard as the desktop capture at 390 pixels. It is a reflow rather than a designed phone page, and for this content that is defensible—a list of things with states doesn't need width the way a chart does, sections stay intact, nothing is dropped, and the slider becomes a much better touch target than it was with a mouse. What doesn't survive is the order. On desktop the sections sit in three columns and each column reads down: Welcome, Energy, Outdoor on the left. On the phone they come out row by row instead, so Energy falls from second in its column to fourth on the page and Kitchen climbs from the far right to third. Nothing about the desktop layout expressed which of those mattered more, so the reflow had nothing to preserve and picked an order from the source. The rail is the other casualty and goes exactly where these always go, into a hamburger. Hotspots in this capture: - [Mobile adaptation](https://patterns.konigi.com/dashboards/mobile-adaptation) — Reflowed, not rebuilt. Section order comes out row-major here and column-major on desktop, so priority shifts. - [Sidebar and canvas](https://patterns.konigi.com/dashboards/sidebar-and-canvas) — The rail is gone. Everything it held is now behind one button, which is the usual and unavoidable trade. - [Resizable card grid](https://patterns.konigi.com/dashboards/resizable-card-grid) *(this pattern)* — Two columns of cards inside each section rather than a single stack, so the page stays short enough to scroll. - [Header KPI strip](https://patterns.konigi.com/dashboards/header-kpi-strip) — The three chips survive the switch intact, which is what a strip of four to six is for. **Demo dashboard** — captured September 10, 2026, Home Assistant public demo (signed out). personal, medium density, light theme, desktop-web. The grouping axis here is physical space—Living room, Kitchen, Study, Outdoor—which nothing else in this gallery uses, and it works for the same reason process mimics work: the viewer already holds the model. The thing worth stealing is the state labelling. Every entity says its state in words: Open · 100%, Off, Closed, Playing, Up-to-date, Unplugged. The amber tint on an icon repeats what the word already said rather than replacing it, so the page is readable with no colour at all. That isn't accessibility diligence so much as an audience constraint—you cannot train a household on a colour key the way you can train an on-call rota, so the words have to carry. Each section header also doubles as a summary: Living room reports 22.8°C and 57% humidity beside its own name, and Study reports "In a meeting". And this is a control surface as much as a display—the Spotlights card is a slider you drag, the thermostats have plus and minus. Hotspots in this capture: - [Resizable card grid](https://patterns.konigi.com/dashboards/resizable-card-grid) *(this pattern)* — Cards a household arranges itself, grouped by room. Sections are one column each rather than a free canvas. - [Semantic grouping](https://patterns.konigi.com/dashboards/semantic-grouping) — Grouped by where the thing physically is, and the group header carries that room's temperature and humidity. - [Semantic status color](https://patterns.konigi.com/dashboards/semantic-status-color) — Amber means on, and the card says 49% anyway. Colour repeats the word instead of replacing it. - [Header KPI strip](https://patterns.konigi.com/dashboards/header-kpi-strip) — Three chips above everything: outside temperature, humidity, and whether anyone is home. - [Sidebar and canvas](https://patterns.konigi.com/dashboards/sidebar-and-canvas) — Collapsed to icons by default, because on a wall tablet the canvas is worth more than the labels. - [Sparkline](https://patterns.konigi.com/dashboards/sparkline) — One card carrying a number and the shape behind it, with no axis and no legend. - [Dashboard builder](https://patterns.konigi.com/dashboards/dashboard-builder) — A pencil in the corner. Editing is one click from reading, which is why these pages actually get rearranged. ## Related patterns - [Panel grid](https://patterns.konigi.com/dashboards/panel-grid) — Many independent panels need to share one screen without fighting for it. - [Saved view](https://patterns.konigi.com/dashboards/saved-view) — The team re-selects the same five filters every morning. - [Dashboard builder](https://patterns.konigi.com/dashboards/dashboard-builder) — The person who needs the dashboard has to be able to make it. - [Semantic grouping](https://patterns.konigi.com/dashboards/semantic-grouping) — Panels belong together by meaning, and the layout should say so. - [Multi-page dashboard](https://patterns.konigi.com/dashboards/multi-page-dashboard) — One page can't hold it and the sections have different audiences. ## Sources - [Grafana, Create a dashboard](https://grafana.com/docs/grafana/latest/visualizations/dashboards/build-dashboards/create-dashboard/) - [Nielsen Norman Group, Progressive Disclosure](https://www.nngroup.com/articles/progressive-disclosure/) - [Bach et al., Dashboard Design Patterns](https://dashboarddesignpatterns.github.io/patterns.html) --- Screenshots on patterns.konigi.com are reproduced for commentary and criticism. Product names and marks belong to their owners.