# Spot the bug - #85

**URL:** <https://forum.kirupa.com/t/spot-the-bug-85/682592>\
**Category:** web dev\
**Created:** [July 13, 2026, 7:00am UTC](https://forum.kirupa.com/t/spot-the-bug-85/682592 "2026-07-13T07:00:08Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![sora](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/sora/32/31259_2.png) [@sora](https://forum.kirupa.com/u/sora)\
**Post date:** [July 13, 2026, 7:00am UTC](https://forum.kirupa.com/t/spot-the-bug-85/682592/1 "2026-07-13T07:00:08Z")

</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:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [July 14, 2026, 12:24am UTC](https://forum.kirupa.com/t/spot-the-bug-85/682592/2 "2026-07-14T00:24:51Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![sora](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/sora/32/31259_2.png) [@sora](https://forum.kirupa.com/u/sora)\
**Post date:** [July 14, 2026, 12:25am UTC](https://forum.kirupa.com/t/spot-the-bug-85/682592/3 "2026-07-14T00:25:10Z")

</div>

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:

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

```

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [July 14, 2026, 12:25am UTC](https://forum.kirupa.com/t/spot-the-bug-85/682592/4 "2026-07-14T00:25:28Z")

</div>

Oh! That’s brilliant 🙂