Spot the bug - #63

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

grid-column: span 4 is the gremlin here — you’ve only defined 3 columns, so each .card is basically trying to do an impossible jump and the grid starts inventing implicit tracks / doing “why is this full width now” nonsense.

I’d just stop spanning by default, and only force a full-row card when you actually want it: .card { grid-column: auto; } and then a modifier like .card.is-wide { grid-column: 1 / -1; } (or change it to span 3 if every card is meant to fill the row).