grid

Smart CSS grid for arraging HTML elements of different sizes with a known min and max width. Scaling elements on mouse wheel also scales the grid to Keep the expected responsiveness.

install

>npm i scale-grid

Live Demo

https://websvg.github.io/grid/

* reload the page to get new random size shapes
* change the window size to let the elements responsively reorganise
* shitKey+mouse wheel : scale shapes up and down together with the grid, keeping responsive reorganisation

Web docs

CSS Style Sheet Constructors

* https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet

CSS Grid Layout

* https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

Note on integration

* the build script is not cross os given the poor default cross platform capabilities available
* it is not necessary to recreate the wheel, in stead of re-writing a new cross platform copy script, the option of using an existing minimal bundler is being analyzed
* here some development priorization rules :
* provide a running demo on the same repo
* provide a ready to use file after install (optionally after build if possible to have it 100% cross platform and automated)
* minimize file storage duplication, and keep a simple repo directory structure
* automate the build process
* use a budler if needed but minimize balck magic lock in and rely rather on tested standards

Versions

1.1.0

* enabled unlimited grid slots usage by one entry not only 1 or 2
* added element resize()

Features plan

* conditional colors not default
* optional wheel disable