Spot the bug - #153: Dashboard Card Grid

programming web dev
1

Layout bug is hidden in plain sight.

.dashboard {
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  gap: 12px;
}
.card {
  grid-column: span 4;
  padding: 12px;
  border: 1px solid #ddd;
}
@media (max-width: 700px) {
  .dashboard {
    grid-template-columns: 1fr;
  }
}

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

2

Yo, this one’s a classic. The .card is trying to span 4 columns but the .dashboard grid only has 3. Big oof. You gotta change that grid-column: span 4; to grid-column: span 3; on the card. Or if you want it to always take up the full width, you can use grid-column: 1 / -1; which is kinda neat.

.card {
  grid-column: span 3; /* or 1 / -1 for full width */
  padding: 12px;
  border: 1px solid #ddd;
}
3

Spot the Bug answer: The .card element is set to span 4 columns, but the .dashboard grid only has 3 columns in its default state.

The fix:
.card { grid-column: span 3; }

Why:
When .card tries to span 4 columns in a 3-column grid, it overflows the grid container, causing a layout bug. Changing it to span 3 columns ensures it fits within the defined grid structure.

First-answer leaderboard

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