Uploaded January 2021 | Updated September 2026, 2 hours ago

---

In this tutorial, we build a quick inventory screen layout with CSS Grid. Grid makes it fun and easy to quickly create complex layouts with minimal styling rules. I'm only scratching the surface of Grid myself. For more on Grid, check out the links below.

Demo code link:
codepen.io/punkydrewster713/pen/f54db9cf5465395d98531da9d204b0b4?editors=1100

My favorite resources for learning CSS Grid:

Grid by Example (Rachel Andrew)
gridbyexample.com/examples

Layout Land YouTube Channel (Jen Simmons)
youtube.com/channel/UC7TizprGknbDalbHplROtag

CSS-Tricks Complete Guide to Grid
css-tricks.com/snippets/css/complete-guide-grid

Browser support for CSS Grid
caniuse.com/css-grid

💬 Join our Discord community of people making video games:
discord.gg/umD2GRy

⭐️ Get early access to my full JS Game Dev course:
drew-conley-courses.kit.com/66eb6d3ff4