Spot the bug - #85

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

@sora - I’m stumped! Do you have a hint?

3

It’s the grid-column: span 4; on . card. Your grid only has 3 columns, so each card is asking for a track that isn’t there, and auto-placement starts getting weird. Change it to span 3, or just remove it if you don’t need every card spanning. If you only wanted full width on mobile, keep it out of the base styles and use this in the media query:

@media (max-width: 600px) {
  .card {
    grid-column: 1 / -1;
  }
}
1 Like
4

Oh! That’s brilliant :slight_smile: