Fixing Awesome Analytics’ layout problem – a possible solution

Let’s recap the task. Awesome Analytics does not have any layout, and the chart boxes are stacked on top of each other. So, our task is to align the different parts of the page (header, sidebar, and main content) into a grid and to align the chart boxes so they’re in a grid as well, keeping in mind that there are differently sized chart boxes.

Each chart box should occupy one grid cell. Some are marked as wide, meaning that they are two grid cells wide, and some are marked as tall, meaning they occupy two rows. Chart boxes can be tall, wide, both, or neither. We don’t know up front whether there are more chart boxes to come.

Analyzing the problem

We know from the screenshot in Figure 2.3 that the base layout should have two rows – one for the header and one for the sidebar and content – and two columns – one for the sidebar and one for the content. In addition...