Skip to content
Switch branches/tags

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

CSS Grid Playground

It's a little web app that I've made while I was learning CSS Grid and bored at work. I thought that it would be nice to have something interactive to try and see what Grid can really do, so here it is - Grid Playground.

Right now you can:

  • add or delete grid items,
  • change the number of rows and column,
  • change size of rows and column,
  • change grid container width and height,
  • change the column and row gap,
  • change grid-auto-flow.
  • edit every item properties.

But there (maybe) will be more options in the next releases.

If you need help, you can click the "Need help?" button which will open a modal box with all the basic grid properties used in this app.

DICSLAIMER: There are no official definitions here - use MDN to see those.

Cool features:

  • Each item has random generated background-color,
  • Each item labels and button font color is changed to white or black using HSP algorithm for brightness,
  • It's a PWA so it's almost as good as native app,
  • There are some cool links at the bottom if you want to really master Grid,
  • Maybe it's not perfect, but it works!

Made entirely with HTML, CSS (Sass) and ES6 JavaScript.


  • Newly added items doesn't change labels font color - couldn't get it right just yet, but I'll try to make it work. - Seems like it's fixed in v1.4.0
  • ...

If you like this project, consider giving it a star - it's always appreciated!

Live -

License: MIT


Little app that lets you play with CSS Grid





No releases published


No packages published