Ever wanted a creative way to, eg. lay out projects on a portfolio site?
I needed a grid for my site and flexbox and CSS-grid libraries (AG Grid etc.) forced a choice: full manual control (fixed height/width per item) or full auto-flow.
Nothing in between, and no way to specify a rule like "usually flexible, but sometimes strict."
So I built weighted-grid: items get a weight (like flex-grow) and can optionally pin cols/rows to opt out of stretching on that axis. Empty cells get filled automatically, or you can hand them to a fillComponent.
A demo speaks a thousand token: https://jayf0x.github.io/weighted-grid/
NPM: https://www.npmjs.com/package/weighted-grid
- React + TypeScript, ~2.7kB
- Presets (organic grid, tree-shakable)
- Zero runtime deps (react is a peer dep)
Not many use cases myself beyond my own portfolio — open to ideas, issues, PRs..
Enjoy! 🦊 - stay curious
Top comments (0)