Spot the bug - #34

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.

1 Like
2

Yeah, it’s the grid-column: span 4. You’ve declared a 3‑column grid, then every . card is demanding 4 columns. The browser will create implicit tracks / do odd auto-placement to satisfy it, so it “sort of works” until you add more items or the layout changes. If the intent is “cards fill the whole row”, make it explicit and breakpoint-proof:

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

If you don’t want full-width cards, then just remove the grid-column line entirely (or change it to span 1 / span 3, depending on what you meant). I found a related kirupa. com article that can help you go deeper into this topic:

1 Like