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

I'm designing a responsive dashboard layout for Firefox and need to choose between CSS Grid and Flexbox as the primary layout mechanism. Grid gives me true two-dimensional control over rows and columns, which matches the design, but I've read that deeply nested grids can increase paint times on Firefox 110 and later, particularly on lower-end hardware. Flexbox is simpler and historically cheaper for one-dimensional flows, but aligning items across both axes requires wrapper elements and workarounds.

A second constraint: the page includes a <dialog> element, and my styling relies on the ::backdrop pseudo-element for the overlay. I understand backdrop styling such as background-color only became reliable around Firefox 116, and behavior may differ between release, ESR, and Nightly channels.

Given a target audience that includes Firefox ESR users:

• Should I prefer Grid with a shallow nesting strategy, or Flexbox with wrapper-based two-axis alignment, to keep paint costs predictable?
• How should I verify the trade-off using Firefox's built-in Performance Monitor rather than external profilers?
• Is there a documented way to confirm ::backdrop support per channel, beyond checking layout.css.backdrop.enabled in about:config?