v1.5.2 • UI • 2kb gzipped • MIT
GridSense
Container-query-driven layout for components that adapt to their box, not the viewport.
// why gridsense
The component decides
Layout responds to the space a component is actually given, so the same card works in a sidebar and a full-width row.
// stack
Native where possible
Uses container queries directly and only observes sizes where the browser cannot.
GridSense started as a single file in a client project and stayed small on purpose. It does one job, it does it in 2kb gzipped, and it has no runtime dependencies.
Getting started
Install it, import it, call it:
npm i gridsense-jsLayout responds to the space a component is actually given, so the same card works in a sidebar and a full-width row.
What it does not do
It does not manage your state, style your components or ship a plugin system. Those are your decisions, and keeping them out is what keeps the bundle honest.
- Container-first breakpoints
- Observer fallback
- MIT licensed, commercially friendly
Features
Container-first breakpoints
Breakpoints are declared per component instead of globally.
Observer fallback
Falls back to a resize observer with the same declarative configuration.
Dark mode ready
Reads from CSS custom properties, so a theme switch needs no JavaScript at all.
Container aware
Adapts to the box it is given rather than the viewport, so it works in a sidebar.
Accessibility audited
Tested against screen readers on three platforms, with the findings published in the repository.
ESM and types
Ships module and CommonJS builds with hand-written type definitions and source maps.
Get GridSense v1.5.2
8 files • .min.js 2kb • .zip 94kb • sha384 verified
Changelog
- Native container query path
- Per-component breakpoint sets
- Observer fallback trimmed
- Improved error messages for invalid options
- Added twenty regression tests
- Node 18 is now the minimum supported version
- CommonJS build restored for older bundlers
// related
Related products
ChartForge
Canvas charts in twelve lines. Responsive, accessible and dark-mode ready, with no D3 learning curve.
View →MotionEase
Physics-based micro-animations with a single call. Spring curves that feel right without a tuning session.
View →FormFlow
Validation and multi-step logic that works the same in React, Vue and vanilla. Your markup stays yours.
View →Ship the interface today.
MIT licensed. Commercial friendly. Five-minute setup.