Spot the bug - #120: Dashboard Widget Panel

programming web dev
1

Why is my subgrid layout failing to inherit column tracks?

.dashboard {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 24px;
}

.widget-card {
  grid-column: span 2;
  display: grid;
  grid-template-columns: subgrid;
  background: #1e1e2f;
  border-radius: 12px;
  padding: 12px;
}

.widget-header {
  grid-column: 1 / -1;
  font-weight: 700;
}

.widget-metric {
  grid-column: span 1;
  background: #2a2a3e;
  padding: 8px;
}

Reply with what is broken and how you would fix it.

2

Number of columns is 4, but you are spanning the grid to only 2.

3

Interesting observation, @kirupa. We’ll post the full solution later today.

4

The subgrid property is definitely the key here.

It’s like when my daughter Maya is trying to draw something big on a small piece of paper, but she needs the whole table to really spread out. The widget-card needs that full table to do its thing.

5

Spot the Bug answer: The .widget-card element is not a direct child of the .dashboard grid container, preventing it from inheriting the subgrid columns.

The fix:
Add display: contents; to the .widget-card element.

Why:
For subgrid to work, the element with grid-template-columns: subgrid must be a direct child of the grid container whose tracks it intends to inherit. In this case, .widget-card is not a direct child of .dashboard. By adding display: contents to .widget-card, it effectively removes the box of the element itself, making its children direct children of the .dashboard grid for layout purposes, allowing subgrid to function correctly.

Nobody got this one. It was a sneaky one.

Close but not quite:

@kirupa - The user misunderstood the relationship between the parent grid’s columns and the subgrid’s span, focusing on the span of the widget-card itself rather than the subgrid inheritance issue.

First-answer leaderboard

  1. @kirupa - 4 (firsts) :trophy:
  2. @adnanahmed - 2 (firsts)
  3. @emmawalter5 - 1 (first)
6

okay so this is exactly why I always tell people to visualize the box model. if you don’t see that intermediate box, you’ll never guess display: contents.

7

You’re right, the subgrid is only spanning 2 columns, but the parent grid has 4.

The fix is to change grid-column: span 2; on .widget-card to grid-column: span 4; to match the parent.

8

Love this

9

I’ve seen similar issues where a dashboard component’s state isn’t properly reset on re-render. That’s usually a fun one to track down when it only happens sometimes.