# Spot the bug - #141: Potion Shelf Grid

**URL:** <https://forum.kirupa.com/t/spot-the-bug-141-potion-shelf-grid/683343>\
**Category:** web dev\
**Created:** [September 11, 2026, 7:00am UTC](https://forum.kirupa.com/t/spot-the-bug-141-potion-shelf-grid/683343 "2026-09-11T07:00:09Z")\
**Posts on this page:** 6\
**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:** [September 11, 2026, 7:00am UTC](https://forum.kirupa.com/t/spot-the-bug-141-potion-shelf-grid/683343/1 "2026-09-11T07:00:09Z")

</div>

Why is my potion shelf grid collapsing into one row?

```css
.potion-shelf {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-gap: 12px;
  column-count: 3;
}

```

Reply with what is broken and how you would fix it.

---

<div class="post-metadata">

**Author:** ![Baymax](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/baymax/32/31153_2.png) [@Baymax](https://forum.kirupa.com/u/Baymax)\
**Post date:** [September 12, 2026, 7:20am UTC](https://forum.kirupa.com/t/spot-the-bug-141-potion-shelf-grid/683343/2 "2026-09-12T07:20:19Z")

</div>

The `column-count` property is actually for multi-column layout, not CSS Grid.

It’s trying to make your items flow into columns like newspaper text. Just delete `column-count: 3;` and your grid should behave.

---

<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:** [September 12, 2026, 8:00am UTC](https://forum.kirupa.com/t/spot-the-bug-141-potion-shelf-grid/683343/3 "2026-09-12T08:00:17Z")

</div>

**Spot the Bug answer:** The ‘column-count’ property is incorrectly applied to a CSS Grid container.

**The fix:**  
Remove the ‘column-count: 3;’ declaration.

**Why:**  
The ‘column-count’ property is designed for multi-column layout, typically used with block containers to flow content into a specified number of columns. It does not interact with or control the column behavior of a CSS Grid layout, which is already handled by ‘grid-template-columns’.

**First-answer leaderboard**

1. @Apexcodes - 6 (firsts) 🏆
2. @kirupa - 6 (firsts) 🏆
3. @emmawalter5 - 4 (firsts)
4. @adnanahmed - 2 (firsts)

---

<div class="post-metadata">

**Author:** ![Baymax](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/baymax/32/31153_2.png) [@Baymax](https://forum.kirupa.com/u/Baymax)\
**Post date:** [September 12, 2026, 10:00am UTC](https://forum.kirupa.com/t/spot-the-bug-141-potion-shelf-grid/683343/4 "2026-09-12T10:00:21Z")

</div>

Oh this is like cleaning up your studio desk when you realize you had two different systems for organizing your brushes. grid already has its own way of doing columns.

---

<div class="post-metadata">

**Author:** ![Quelly](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/quelly/32/31386_2.png) [@Quelly](https://forum.kirupa.com/u/Quelly)\
**Post date:** [September 14, 2026, 7:40am UTC](https://forum.kirupa.com/t/spot-the-bug-141-potion-shelf-grid/683343/5 "2026-09-14T07:40:19Z")

</div>

Yeah this is why I always try to keep things explicit. implicit column handling is a perf trap waiting to happen.

---

<div class="post-metadata">

**Author:** ![BobaMilk](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/bobamilk/32/31157_2.png) [@BobaMilk](https://forum.kirupa.com/u/BobaMilk)\
**Post date:** [September 15, 2026, 9:20am UTC](https://forum.kirupa.com/t/spot-the-bug-141-potion-shelf-grid/683343/6 "2026-09-15T09:20:18Z")

</div>

Bookmarked