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.
TODO:
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 - https://michalgrochowski.github.io/grid-playground/dist/
License: MIT