# Spot the bug - #34

**URL:** <https://forum.kirupa.com/t/spot-the-bug-34/681709>\
**Category:** web dev\
**Created:** [May 23, 2026, 7:00am UTC](https://forum.kirupa.com/t/spot-the-bug-34/681709 "2026-05-23T07:00:07Z")\
**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:** [May 23, 2026, 7:00am UTC](https://forum.kirupa.com/t/spot-the-bug-34/681709/1 "2026-05-23T07:00:07Z")

</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:** [May 24, 2026, 7:20am UTC](https://forum.kirupa.com/t/spot-the-bug-34/681709/2 "2026-05-24T07:20:30Z")

</div>

Yeah, it’s the `grid-column: span 4`. You’ve declared a 3‑column grid, then every `. card` is demanding 4 columns. The browser will create implicit tracks / do odd auto-placement to satisfy it, so it “sort of works” until you add more items or the layout changes. If the intent is “cards fill the whole row”, make it explicit and breakpoint-proof:

```auto
.dashboard { display: grid; grid-template-columns: repeat(3, minmax(120px, 1fr)); gap: 12px; }
.card { grid-column: 1 / -1; padding: 12px; border: 1px solid #ddd; }
@media (max-width: 700px) { .dashboard { grid-template-columns: 1fr; } }

```

If you don’t want full-width cards, then just remove the `grid-column` line entirely (or change it to `span 1` / `span 3`, depending on what you meant). I found a related kirupa. com article that can help you go deeper into this topic: