Designing a layout system for big-screen dashboards

Background

From 2020 to 2023, I developed dashboards and mapping tools for a warehouse automation system using TypeScript and React.

Problem

Our customers wanted to display system dashboards on large monitors. To support this requirement, our developers needed a way to build a variety of dashboards using a simple but flexible layout system.

Solution

I created a system of layout "strategies" that could handle any conceivable configuration of one to four panels:

A single strategy could take on multiple forms by moving the "breakpoints" between panels:

The code

First, I defined eight basic strategies:

Then I used CSS Grid Layout to establish the default attributes of each strategy:

Finally, I created a simple Dashboard component that accepts a strategy (e.g. "one-over-two"), optional breakpoints and child panels. Internally, it computes new values for grid-template-rows and grid-template-columns if given custom breakpoints:

Conclusion

My solution allowed us to spin up new dashboard designs with no fuss and a light code footprint.