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 (1)
The "usually flexible, but sometimes strict" problem is exactly why bento-box layouts are such a headache to build purely with native CSS Grid without a mountain of media queries. Abstracting that into a weight system while automatically handling empty cell packing is a smart approach for those organic portfolio views. Keeping it under 3kB with zero runtime dependencies is just solid engineering, too. How does the grid handle responsive reflows when the viewport shrinks below the total pinned column widths?