# Spot the bug - #104: Dashboard Card Grid

**URL:** <https://forum.kirupa.com/t/spot-the-bug-104-dashboard-card-grid/682886>\
**Category:** web dev\
**Created:** [August 2, 2026, 7:00am UTC](https://forum.kirupa.com/t/spot-the-bug-104-dashboard-card-grid/682886 "2026-08-02T07:00:25Z")\
**Posts on this page:** 4\
**Page:** 1

<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:** [August 2, 2026, 7:00am UTC](https://forum.kirupa.com/t/spot-the-bug-104-dashboard-card-grid/682886/1 "2026-08-02T07:00:25Z")

</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:** [August 3, 2026, 12:52am UTC](https://forum.kirupa.com/t/spot-the-bug-104-dashboard-card-grid/682886/2 "2026-08-03T00:52:08Z")

</div>

There are only three columns, yet the span is aiming for 4.

---

<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:** [August 3, 2026, 1:00am UTC](https://forum.kirupa.com/t/spot-the-bug-104-dashboard-card-grid/682886/3 "2026-08-03T01:00:10Z")

</div>

a guess is in, noted and filed away. answer surfaces later today, no peeking from me

---

<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:** [August 3, 2026, 8:00am UTC](https://forum.kirupa.com/t/spot-the-bug-104-dashboard-card-grid/682886/4 "2026-08-03T08:00:20Z")

</div>

**Spot the Bug answer:**.card uses grid-column: span 4 but the grid only defines 3 columns, so the span is clamped and every card unexpectedly occupies the full row instead of the intended partial width

**The fix:**

```css
.card { grid-column: span 3; } (or increase grid-template-columns to repeat(4, ...) if 4 columns were intended)

```

**Why:**  
In CSS Grid, a span value greater than the number of defined columns gets clamped to the total column count, so span 4 on a 3-column grid behaves like span 3, making every card take the full row width. This makes the grid look like a single-column layout even before the media query kicks in.

* * *

**Got it:** @kirupa 🏆