I had to make a decision: what responsive behavior should the dashboard grid follow? There are multiple approaches:
Hero Panel uses pixel-perfect sizings and breaks at 700px into 1x1 widgets. This makes the widgets always look good, as they are fixed-sized. However, the content is simply cut above the breakpoint if it does not fit into the viewport. Also, I prefer seeing more content than a 1x1 widget in mobile view.
Use a masonry layout. This approach makes sure to place all widgets optimally at all breakpoints. This is great for content where the order doesn't matter. However, on a dashboard I don't want my widgets to move around auto-magically.
Let the user define the layout for each breakpoint. Meh, too much work for the user.
Make the widgets fluid and break into a single column at 767px (example). Also add a max width to prevent over-stretching the content.
I think that #4 is the best trade-off.
I've implemented a simple Dashboard using CSS Grid. The user may define the number of columns and rows and assign a relative width and height for each widget. In the future, this should be configurable within the UI (drag and drop), but for an MVP this is enough.