# Spot the bug - #52

**URL:** <https://forum.kirupa.com/t/spot-the-bug-52/682025>\
**Category:** web dev\
**Created:** [June 11, 2026, 7:00am UTC](https://forum.kirupa.com/t/spot-the-bug-52/682025 "2026-06-11T07:00:09Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![BobaMilk](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/bobamilk/32/31157_2.png) [@BobaMilk](https://forum.kirupa.com/u/BobaMilk)\
**Post date:** [June 11, 2026, 7:00am UTC](https://forum.kirupa.com/t/spot-the-bug-52/682025/1 "2026-06-11T07:00:09Z")

</div>

Layout bug is hidden in plain sight.

```css
.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.

---

<div class="post-metadata">

**Author:** ![Ellen1979](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/ellen1979/32/31260_2.png) [@Ellen1979](https://forum.kirupa.com/u/Ellen1979)\
**Post date:** [June 12, 2026, 7:20am UTC](https://forum.kirupa.com/t/spot-the-bug-52/682025/2 "2026-06-12T07:20:32Z")

</div>

Your grid is 3 columns, but the card is trying to span 4, so placement gets unpredictable (and at the 700px breakpoint it’s still “span 4” on a 1‑column grid, which is just nonsense).

I’d fix it by making the card explicitly span the whole grid, regardless of how many columns you’ve got:

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

```