Spot the bug - #46

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

Your grid has 3 columns, but . card { grid-column: span 4; } is asking each card to span four tracks that don’t exist. Browsers will try to auto-place it anyway, which is why it can look “mostly fine” until you hit certain counts/sizes and then you get weird overflow/placement. The fix is to make the span match the grid, or stop hard-coding the span and let the grid define it. For example:

.card { grid-column: span 3; } /* or: grid-column: 1 / -1; for full-width */
@media (max-width: 700px) { .card { grid-column: 1 / -1; } }

Mechanically, this is one of those bugs that hides because auto-placement papers over it—until it doesn’t. I found a related kirupa. com article that can help you go deeper into this topic:

1 Like