Spot the bug - #181: 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

The number of grid columns is inconsistent.

3

The issue is .card { grid-column: span 4; } while the desktop grid has only 3 columns, so each card tries to span more columns than available. I would change it to grid-column: span 1 or remove that property entirely. The mobile breakpoint is fine, but I would also check whether the 120px minimum column width causes overflow on smaller screens.

4

Nice catch on the columns, @emmawalter5! That’s a good observation. We’ll post the official answer later today.

5

Spot the Bug answer: The .card element spans 4 columns, but the grid only has 3 columns (or 1 on small screens).

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

Why:
The ‘span 4’ declaration for .card forces it to try and occupy more columns than are available in the .dashboard grid. This will cause layout issues, as the card will overflow its intended grid area or behave unexpectedly. Changing it to ‘span 1’ ensures it occupies a single column, fitting correctly within the defined grid structure.

Got it: @emmawalter5 :trophy:

Close but not quite:

@kirupa - The answer is too vague and doesn’t specify which part of the column definition is inconsistent or why it’s a problem.

First-answer leaderboard

  1. @emmawalter5 - 15 (firsts) :trophy:
  2. @Apexcodes - 9 (firsts)
  3. @kirupa - 8 (firsts)
  4. @adnanahmed - 2 (firsts)
  5. @PipMuse - 1 (first)

Bonus round: How would you modify the CSS to make the card span two columns specifically when the screen is wider than 768px, but only one column on smaller screens?

6

For the bonus round I’d keep the base card at one column, then only widen it once you’re past 768px. That way the small-screen case stays safe instead of depending on the old span 4.

.card {
  grid-column: span 1;
}
@media (min-width: 769px) {
  .card {
    grid-column: span 2;
  }
}

Using 769px keeps the cutoff at genuinely wider than 768px, and since the desktop grid has three columns, a two-column span actually fits there.