Responsive time tracking dashboard made with CSS Grid and subgrid
Solution retrospective
When styling the tracking cards I ran into a rendering issue (background color bleed in rounded corners) described and solved in this post. I used the linear-gradient method to fix it.
Another challenge was implementing the dashboard grid without changing the desired HTML structure. Here's the deal:
In the desktop design, all the cards — including the "Report for Jeremy Robson" card, are equally wide. To achieve that, it would be best if they followed the same grid.
However, for accessibility and semantics I made the "Report for Jeremy Robson" card be the <header> and placed the tracking cards inside <main>.
<body> <!-- body is the grid -->
<header></header> <!-- header is the "Report for card" -->
<main> <!-- tracking cards are inside main -->
<div class="tracking-card1"></div>
...
<div class="tracking-card6"></div>
</main>
</body>
The <header> and the children of <main> aren’t siblings, so I couldn’t easily control them with the same grid. To solve this, I used subgrid on <main>. This allowed <main>'s children (the tracking cards) to follow the column lines of the grid defined on <body>.
Now both <header> and children of <main> are following <body>'s grid structure and I can easily make them equally wide with grid-template-columns: repeat(4, 1fr).
body {
display: grid;
grid-template-columns: repeat(4, 1fr);
// other properties here
}
header {
grid-column: 1;
grid-row: 1 / -1;
align-self: stretch;
}
main {
display: grid; // the subgrid needs to have display: grid as well
// you set the subgrid keyword on grid-template-columns, grid-template-rows or both
// in this case I needed it on grid-template-columns
grid-template-columns: subgrid;
grid-column: 2 / -1;
// this says in which area of the parent grid should the subgrid lay out its children
// it then lays them out in this area according to the parent's grid lines
}
Please log in to post a comment
Log in with GitHubCommunity feedback
- P@RishabhSikka3
Quite complex approach you have taken to solve it. The fetched data is not getting rendered in UI. I encountered the same issue. Try using the relative path in the javascript file. Use path "data.json" instead of "/data.json".
And I haven't worked using subgrids for now but it can get implement without subgrids.
Marked as helpful
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord