Skip to content
Little app that lets you play with CSS Grid
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

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 "Nees 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

You can’t perform that action at this time.