Design Atlas
한국어
◆ Game UI & game feel

Inventory Grid

인벤토리 그리드

A uniform grid of item slots, with newly acquired ones flagged by a badge or shimmer so they stand out from the rest.

Also known as: 아이템 창Item grid가방
···
html
<div class="igrid" id="igrid"></div>
css
.igrid{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(4px,1.6vmin,8px);width:min(92%,420px)}
.islot{position:relative;aspect-ratio:1;border-radius:7px;background:var(--surface);border:1px solid var(--line)}
.islot.filled{border-color:var(--tier,var(--line))}
.iicon{position:absolute;inset:20%;border-radius:4px;background:var(--tier,var(--muted))}
.icount{position:absolute;right:3px;bottom:2px;font:800 clamp(6px,1.8vmin,9px) monospace;color:var(--fg)}
.ibadge{position:absolute;top:-4px;right:-4px;width:12px;height:12px;border-radius:50%;background:var(--accent-2);
  display:grid;place-items:center;font:800 7px monospace;color:#fff;opacity:0;transform:scale(0.4);transition:all .3s cubic-bezier(.3,1.6,.4,1)}
.ibadge.show{opacity:1;transform:scale(1)}
js
const igrid=document.getElementById('igrid');
const tiers=['var(--muted)','var(--accent-3)','var(--accent)','#a259ff'];
const slots=[];
for(let i=0;i<24;i++){
  const el=document.createElement('div');
  el.className='islot';
  igrid.appendChild(el);
  slots.push(el);
}
function fillSlot(i, count){
  const el=slots[i];
  const tier=tiers[Math.floor(Math.random()*tiers.length)];
  el.classList.add('filled');
  el.style.setProperty('--tier', tier);
  el.innerHTML='<div class="iicon"></div>'+(count>1?'<div class="icount">x'+count+'</div>':'')+'<div class="ibadge">N</div>';
  requestAnimationFrame(function(){ el.querySelector('.ibadge').classList.add('show'); });
  setTimeout(function(){
    const b=el.querySelector('.ibadge');
    if(b) b.classList.remove('show');
  }, 1600);
}
for(let s=0;s<14;s++){ fillSlot(s, Math.random()<0.4 ? Math.ceil(Math.random()*9) : 1); }
document.querySelectorAll('.ibadge').forEach(function(b){ b.classList.remove('show'); });
let filled=14;
function tick(){
  if(filled>=slots.length){ filled=14; setTimeout(tick, 1400); return; }
  fillSlot(filled, Math.random()<0.4 ? Math.ceil(Math.random()*9) : 1);
  filled++;
  setTimeout(tick, 420);
}
setTimeout(tick, 500);

A standard inventory grid lays out square slots at a uniform size and gap. Keeping that spacing consistent is what lets the eye scan efficiently no matter how many items fill in. Empty slots keep just an outline, making it clear there's still room.

Newly acquired items usually get a small dot, an "N" badge, or a one-time shimmer sweep — so players can spot what changed without scanning the whole grid. Stackable items (say, three potions) conventionally show their count as a small number in the corner.

If the game has rarity tiers, carrying that border color into the grid lets players scan value at a glance even here. What happens once the grid fills up — auto-sort, a sell prompt, a purchasable expansion — needs to be decided before the grid is built, so the layout can reflect that rule rather than fight it.

When to use

Any inventory or storage screen where collectible items, materials, or cards accumulate.