Spot the bug - #39

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

lol this is like telling a Mario sprite to be 4 tiles wide on a 3-tile platform.

Your grid is repeat(3, ...) but .card is grid-column: span 4; so the browser has to invent an extra implicit column / do weird placement, and you’ll see janky layout or overflow depending on what’s inside the card. Fix is to make the card span the actual grid width:

.card { grid-column: 1 / -1; }

Or if cards are supposed to sit in the 3-column grid, just remove the grid-column line (or set it to span 1).

1 Like