# Panel grid > Many independent panels need to share one screen without fighting for it. - Canonical: https://patterns.konigi.com/dashboards/panel-grid - Group: Screenspace - Level: context - Status: published - Updated: September 10, 2026 - Also called: widget grid, tile layout, dashboard canvas --- ## Problem Twenty panels, one screen, and no two of them want the same dimensions. A latency chart needs width to be readable, a status tile needs almost nothing, and a table needs height. Left to itself this becomes a ransom note. ## Solution Impose a coordinate system. A fixed column count, a row unit, and panels that snap to multiples of both. Everything aligns because nothing is allowed not to. The grid is the reason dashboards look like dashboards. It also carries most of the meaning a viewer picks up before reading anything: things the same size read as equally important, things on the same row read as related, and the top-left panel reads as the answer. That last one is unavoidable, so the only question is whether the panel that lands there deserves it. A grid is a compromise with two edges. Too few columns and every panel is either too wide or too narrow. Too many and the alignment stops being visible, at which point you have absolute positioning with extra steps. Twelve is the near-universal answer because it divides by 2, 3, 4 and 6, which covers halves, thirds, quarters and sixths without fractions. The part that separates a grid that helps from one that merely tidies: whether panel size is allowed to mean something. If every panel is the same size, the layout says nothing about priority and the viewer has to read all twenty titles. A grid that lets one panel be four times the size of its neighbours can say "start here" without a word of copy. ## Use when More than a handful of panels share a page and viewers scan rather than read. Which is nearly every dashboard. ## Don't use when The page has a reading order. A narrative that walks someone through an argument wants a single column, because a grid invites the eye to jump and a narrative depends on it not doing that. ## Trade-offs Grids reward panels that fit the grid, so the layout starts to shape the content: people pick a visualisation because it tiles well rather than because it answers the question. Everything looking equally considered makes it hard to tell a load-bearing panel from one somebody added in 2023 and forgot. Responsive behaviour is where grids fail, because a twelve-column layout reflowing to one column produces an order nobody designed and rarely the priority order. And drag-and-drop editing makes it trivial to create a layout that works on the author's monitor and nowhere else. ## Checklist - How many columns, and does the count support the fractions this page needs? - Does the top-left panel deserve to be the first thing read? - Does panel size encode importance, or is everything the same size by default? - Do panels on a row belong together, or did they land there by packing? - What order do panels take when the grid collapses to one column? - What is the shortest viewport this page is used at, and what falls below the fold there? - Is there a minimum size below which a given panel type stops being readable? - Do gaps and alignment survive panels with different title lengths? - Can an author create a layout that only works at their window size? - Is the arrangement stable, or does it reflow differently for different viewers? ## Compare **Grafana** uses a 24-unit horizontal grid with drag-and-drop sizing and a packing behaviour that pulls panels upward into gaps, which makes editing fast and means moving one panel can rearrange several others. **Datadog** offers both a fixed grid and a free-form canvas, so a team can choose between consistency and expressive layout, and most eventually regret whichever they picked. **Kibana** treats panels as cards on a resizable grid with each panel carrying its own query, which pushes coherence entirely onto whoever assembles the page. **Honeycomb** barely has this pattern: the primary surface is a query and its result, so composition happens in boards that collect saved queries rather than in a canvas of independent tiles. ## Related Collapsible row is how a grid survives past one screen. Dense small-multiple layout is the grid pushed to its limit deliberately. Header KPI strip is the grid's top row doing a specific job. Resizable card grid is what happens when the viewer, not the author, controls the arrangement. Semantic grouping is the principle that should decide adjacency. ## Examples ### Grafana (Grafana Labs) The reference implementation for panel grids, template variables, and stat panels; most other tools are defined by how they differ from it. **Where The Cool Dashboards Live / Chicago L Trains** — captured September 10, 2026, Grafana Play (signed out; no version string exposed). wallboard, sparse density, dark theme, wall. A live departures board for one platform, built out of stat panels against the CTA Train Tracker API, and it is the clearest wallboard in the gallery: four rows, type large enough to read across a concourse, no chrome inside the board and nothing to hover. The next train gets three times the height of the three behind it, which is the layout saying "start here" without a word of copy. The interesting problem is the colour. Pink, Green and Orange are the CTA's own line colours, inherited from the world outside the screen and already known to every rider—which is the best possible reason to use a palette. But the status chip beside them is also green when a train is on time, so on the second row "Cottage Grove" is green because it is the Green Line and "On Time" is green because it is on time, side by side, meaning two unrelated things. Hotspots in this capture: - [Wallboard mode](https://patterns.konigi.com/dashboards/wallboard-mode) — The next train, three times the height of the rest. Readable at ten feet with no pointer. - [Panel grid](https://patterns.konigi.com/dashboards/panel-grid) *(this pattern)* — Rows two to four at a third the size. Panel size is carrying the priority. - [Semantic status color](https://patterns.konigi.com/dashboards/semantic-status-color) — Green for on time, next to green for the Green Line. One hue, two unrelated jobs, one row. - [Freshness indicator](https://patterns.konigi.com/dashboards/freshness-indicator) — A countdown rather than a clock time, which is the right call and hides how old the feed is. - [Data table](https://patterns.konigi.com/dashboards/data-table) — The raw feed under the board, including the rgb string each line colour came from. ### Kibana (Elastic) Query-first rather than panel-first: the search bar is the primary control and the charts are downstream of it, which inverts Grafana's arrangement. **Dashboards / [Flights] Global Flight Dashboard** — captured September 10, 2026, Elastic demo environment, sample flight data (guest session). analytical, dense density, light theme, desktop-web. Two things on this page are worth arguing with. The first is the table on the right, sorted by delay rate: Chicago/Rockford 100%, Syracuse 100%, Birmingham 75%. A hundred percent of flights delayed is either a catastrophe or one flight, and nothing in the table says which, because the denominator isn't a column. The cells are on a red ramp, so the two rows that are almost certainly a sample of one are the loudest thing in the panel. The second is the tile row: Delayed 25.2%, then beside it "Delayed vs 1 week earlier—76.9%". Seventy-six point nine percent of what? It could be last week's rate, it could be this week as a proportion of last week, it could be the change. Three different numbers, one label, and the tile picks whichever the query returned. What the page gets right is the filtering: a KQL bar for people who know the syntax and three declared controls underneath for people who don't, both visible at once. Hotspots in this capture: - [Ratio and rate](https://patterns.konigi.com/dashboards/ratio-and-rate) — Delay rates up to 100% with no denominator anywhere. One flight and a thousand flights render identically. - [Compare periods](https://patterns.konigi.com/dashboards/compare-periods) — "vs 1 week earlier, 76.9%"—the comparison base is named and the expression isn't. - [Share and embed](https://patterns.konigi.com/dashboards/share-and-embed) — Share, export and full-screen in the header. Whether the range and filters travel with them is the whole question. - [Filter bar](https://patterns.konigi.com/dashboards/filter-bar) — Declared controls under the query bar: two pickers and a price range. Both mechanisms on screen at once. - [Panel grid](https://patterns.konigi.com/dashboards/panel-grid) *(this pattern)* — Twelve columns, and the biggest panel is a table rather than the headline chart. Size isn't carrying priority here. - [Stacked composition](https://patterns.konigi.com/dashboards/stacked-composition) — Stacked to 100%, so the total is discarded on purpose and only the mix of delay types remains. - [Annotation](https://patterns.konigi.com/dashboards/annotation) — Event markers along the top of the series, numbered and grouped, on the data's own axis. - [Header KPI strip](https://patterns.konigi.com/dashboards/header-kpi-strip) — Five tiles in three different sizes and two different layouts, so the row reads as five things. ## Related patterns - [Collapsible row](https://patterns.konigi.com/dashboards/collapsible-row) — The dashboard grew to sixty panels and the viewer needs the top twelve most of the time. - [Dense small-multiple layout](https://patterns.konigi.com/dashboards/dense-small-multiple-layout) — An expert wants everything on one screen and will trade legibility for it. - [Header KPI strip](https://patterns.konigi.com/dashboards/header-kpi-strip) — The first row of the page has to answer 'is it okay' before the rest asks 'why'. - [Resizable card grid](https://patterns.konigi.com/dashboards/resizable-card-grid) — Different viewers care about different numbers and want to arrange them. - [Semantic grouping](https://patterns.konigi.com/dashboards/semantic-grouping) — Panels belong together by meaning, and the layout should say so. ## Sources - [Grafana, Panels and visualizations](https://grafana.com/docs/grafana/latest/visualizations/panels-visualizations/) - [Grafana, Create a dashboard](https://grafana.com/docs/grafana/latest/visualizations/dashboards/build-dashboards/create-dashboard/) - [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.