# Spot the bug - #75

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

<div class="post-metadata">

**Author:** ![WaffleFries](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/wafflefries/32/31185_2.png) [@WaffleFries](https://forum.kirupa.com/u/WaffleFries)\
**Post date:** [July 4, 2026, 7:00am UTC](https://forum.kirupa.com/t/spot-the-bug-75/682434/1 "2026-07-04T07: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:** ![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:** [July 5, 2026, 7:20am UTC](https://forum.kirupa.com/t/spot-the-bug-75/682434/2 "2026-07-05T07:20:28Z")

</div>

Your grid has 3 columns, but `. card { grid-column: span 4; }` is asking for four. Browsers will happily create an implicit 4th column to satisfy that, which is why you get weird overflow/spacing and “why is this wider than the grid” vibes. Fix is just to stop spanning more tracks than exist (or make the span responsive):

```auto
.card { grid-column: span 3; } /* or just remove it */
@media (max-width: 700px) { .card { grid-column: span 1; } }

```

Mechanism-wise: `grid-column: span N` doesn’t clamp to your template; it can force implicit tracks, and that’s the kind of “looks fine until one breakpoint” bug that wastes an hour. I found a related kirupa. com article that can help you go deeper into this topic: