Practicing with Awesome Analytics

Now that we’ve learned about the advanced concepts of CSS Grid and how to create and steer advanced CSS Grid layouts, it’s time to practice.

Receiving the task

After the first round of adding layouts to Awesome Analytics, the stakeholders were amazed. However, they asked for several improvements to the grid dashboard, the overall layout, and some visual adjustments.

They feel parts of the current design are old-fashioned and would like to improve a few things. First, they want to eliminate any gaps, as they feel that the chart boxes offer enough whitespace. Second, the gray background should be gone.

The design experts also feel that the app is missing a vertical rhythm. Ideally, all components (namely the header, all navigation points, and charts) should be aligned in rows of 40px with no gap. A standard chart box should be 10 rows tall and span 1 column, whereas tall chart boxes should span 20 rows. Wide chart boxes should...