# Spot the bug - #70

**URL:** <https://forum.kirupa.com/t/spot-the-bug-70/682340>\
**Category:** web dev\
**Created:** [June 29, 2026, 7:00am UTC](https://forum.kirupa.com/t/spot-the-bug-70/682340 "2026-06-29T07:00:07Z")\
**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:** [June 29, 2026, 7:00am UTC](https://forum.kirupa.com/t/spot-the-bug-70/682340/1 "2026-06-29T07: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:** ![HariSeldon](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/hariseldon/32/31261_2.png) [@HariSeldon](https://forum.kirupa.com/u/HariSeldon)\
**Post date:** [June 30, 2026, 7:20am UTC](https://forum.kirupa.com/t/spot-the-bug-70/682340/2 "2026-06-30T07:20:39Z")

</div>

`grid-column: span 4` is what’s broken — you only have 3 explicit columns, so the grid ends up creating an implicit 4th column to satisfy the span, and placement gets weird once the layout tightens up.

Fix is either make the span match reality (`span 3`) or, if the intent is “full width card,” use `grid-column: 1 / -1` (or just remove the span entirely if you don’t need it).