CSS Grid or Flexbox for a complex responsive dashboard in Firefox without regressing paint time

Short Answer

For a genuinely two-dimensional dashboard, CSS Grid with a shallow structure is the more predictable choice — but the performance claim in your question deserves scrutiny before you commit, and your ::backdrop constraint is the harder of the two problems because of your ESR audience.

What I Can State Confidently vs. What Needs Verification

Well-established behavior: Grid is designed for two-dimensional layout; Flexbox is one-dimensional, so cross-axis alignment across a whole dashboard typically requires extra wrapper elements. Extra wrappers mean a deeper DOM, and a deeper DOM generally means more layout and style-recalculation work when the viewport changes. That part is architectural, not version-specific.

Uncertain — treat as hypothesis, not fact: The claim that nested grids specifically regressed paint time on Firefox 110+ is not something I can confirm from documentation, and I should not present it as established. Layout engines change frequently, and paint cost depends heavily on content, invalidation patterns, and hardware. The safe engineering position is: keep nesting shallow (one outer grid, avoid nested subgrids where a flat grid-template-areas layout works), and measure on your actual content and target hardware rather than trusting a general rule. If your measurements show no meaningful difference, choose whichever layout produces the simpler DOM — that is usually Grid for dashboards.

Measuring with Firefox's Built-in Tools

One correction to a common assumption: Firefox's about:performance (Task Manager) shows per-tab energy and memory impact, not frame-level paint timing. For paint analysis you want the Firefox Profiler (available via the menu under More Tools, or at profiler.firefox.com, which is Mozilla's own tool and can capture locally). A practical approach:

1. Build two minimal variants of the dashboard shell — one Grid, one Flexbox-with-wrappers — with identical content.
2. Capture a profile while performing representative interactions: window resize, widget toggles, opening the dialog.
3. In the timeline, look at the Renderer/Main thread for layout and paint markers and for dropped or long frames.
4. Repeat on the lowest-end hardware your audience actually uses; differences that are invisible on a developer laptop can matter there.

I cannot guarantee the exact marker names or UI labels in the current Profiler version — verify against the build you have installed.

The ::backdrop Constraint Is the Real Risk

Here the version question is concrete and I want to be careful: I cannot confirm the exact Firefox version in which ::backdrop styling (e.g., background-color) became fully reliable, and your stated figure of Firefox 116 should be verified rather than assumed. What is safe to say:

• ESR tracks an older feature set than release by design, so any backdrop behavior tied to a recent release version may be absent in your ESR audience's builds.
• Feature-detect rather than version-sniff: test CSS.supports('::backdrop') is not reliable for pseudo-element behavior, so the robust check is a runtime visual/DOM test — open a <dialog> via showModal() in a hidden iframe or test page and read back the computed style of the backdrop, or simply ship a fallback overlay (a positioned semi-transparent div behind the dialog) that you show when the computed backdrop style is not applied.
• Regarding layout.css.backdrop.enabled: I cannot confirm that this exact preference exists in current Firefox. Check about:config on your target builds, and consult the MDN compatibility table for ::backdrop plus Mozilla's release notes for the ESR branch you must support — those are the authoritative per-channel sources.

Given the ESR constraint, the pragmatic recommendation is: use Grid (shallow) for layout, and treat the styled backdrop as a progressive enhancement over a fallback overlay until you have confirmed support on the exact ESR version in your support matrix.

One Missing Detail

Which specific ESR version must you support? That determines whether ::backdrop styling can be relied on at all, and it changes the answer more than the Grid-vs-Flexbox choice does.