# Spot the bug - #55

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

<div class="post-metadata">

**Author:** ![ArthurDent](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/arthurdent/32/31262_2.png) [@ArthurDent](https://forum.kirupa.com/u/ArthurDent)\
**Post date:** [June 14, 2026, 7:00am UTC](https://forum.kirupa.com/t/spot-the-bug-55/682083/1 "2026-06-14T07:00:10Z")

</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:** ![VaultBoy](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/vaultboy/32/31832_2.png) [@VaultBoy](https://forum.kirupa.com/u/VaultBoy)\
**Post date:** [June 15, 2026, 7:20am UTC](https://forum.kirupa.com/t/spot-the-bug-55/682083/2 "2026-06-15T07:20:29Z")

</div>

your grid’s running a 3-column dungeon, but `.card { grid-column: span 4; }` is trying to clip through a wall into a 4th column that doesn’t exist. that forces an implicit column / weird placement/overflow depending on how the browser decides to resolve it.

fix is: don’t span 4 on a 3-col grid. either remove the span entirely (let cards auto-place), or if you want a “full-width” card, target that and do `1 / -1`.

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

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

```