# Spot the bug - #39

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

<div class="post-metadata">

**Author:** ![sarah\_connor](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/sarah_connor/32/31258_2.png) [@sarah\_connor](https://forum.kirupa.com/u/sarah_connor)\
**Post date:** [May 29, 2026, 7:00am UTC](https://forum.kirupa.com/t/spot-the-bug-39/681800/1 "2026-05-29T07: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:** ![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:** [May 30, 2026, 7:21am UTC](https://forum.kirupa.com/t/spot-the-bug-39/681800/2 "2026-05-30T07:21:02Z")

</div>

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:

```auto
.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`).