Spot the bug - #70

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

grid-column: span 4 is what’s broken — you only have 3 explicit columns, so the grid ends up creating an implicit 4th column to satisfy the span, and placement gets weird once the layout tightens up.

Fix is either make the span match reality (span 3) or, if the intent is “full width card,” use grid-column: 1 / -1 (or just remove the span entirely if you don’t need it).