MiniCSSGrid
https://github.com/tscircuit/minicssgrid- Category
- Developer Tools
- Rank
- No. 1627Tools index
- Pricing
- Open Source
- Type
- TOOL
- Builder
- tscircuit
- GitHub
- 71 stars
- Date
About
A tiny CSS grid implementation in TypeScript. Useful for layout engines that can't depend on a browser.
What it does
MiniCSSGrid turns grid definitions and keyed items into numeric positions and sizes. You supply tracks, container dimensions, gaps, alignment, spans, ordering, and content measurements. It returns cells, track sizes, gaps, and a coordinate lookup, with optional HTML and debugging graphics.
Why it's ranked here
The focused API covers useful layout-engine basics while remaining easy to install and inspect. Its strongest proof is browser-comparison testing across explicit placement, automatic placement, percentages, flexible tracks, spans, gaps, and content sizing. The implementation still models only a reduced slice of CSS Grid.
What's good
Inputs closely resemble familiar CSS Grid concepts, including one-based placement, negative line indices, flexible tracks, percentages, gaps, spans, and alignment. Results expose both detailed cells and direct coordinate lookup. HTML output and colored graphics provide practical ways to compare or debug computed layouts.
Tradeoffs
This is not a complete CSS Grid engine. Repeat expansion handles only a single simple form, automatic placement is explicitly cut down, and unsupported tokens can fall back to zero or parsed numbers. Structured track arrays are documented and typed, but the shown layout path processes only string templates.
How to use it well
Use it inside a renderer, diagrammer, layout simulator, or test harness that needs deterministic rectangles from CSS-like grid inputs. Keep templates within the demonstrated subset and compare important cases against browser output. It does not replace browser rendering, full CSS parsing, or general content measurement.
Technical notes+
package.json defines an ESM npm package, builds lib/index.ts with tsup, emits declarations, and treats TypeScript 5 as a peer dependency. lib/CssGrid/CssGrid.ts wraps computation, HTML generation, and GraphicsObject visualization. lib/CssGrid/CssGrid_layout.ts expands simple repeat() expressions, tokenizes tracks, resolves fixed, percentage, em, fr, and auto sizes, computes intrinsic sizes when container dimensions are absent, and performs reduced row-major placement. lib/CssGrid/CssGrid_convertToHtml.ts serializes options into inline grid styles and keyed child markup. playwright.config.ts targets Chromium, while the documented Bun snapshot workflow compares computed layouts with browser-generated results.
Observed
- License
- MIT
- Primary language
- TypeScript
- Install surface
- Published package installable with npm or Bun
- Module format
- ECMAScript module package with generated TypeScript declarations
- Interface
- Programmatic class library returning layout data, HTML, and debugging graphics
- TypeScript requirement
- TypeScript 5 is declared as a peer dependency
- Browser validation
- Playwright is configured to run browser tests in Chromium
Read from README.md, package.json, lib/index.ts, lib/types.ts, lib/colors.ts, lib/visualizeBrowserResult.ts, lib/CssGrid/CssGrid.ts, lib/CssGrid/CssGrid_layout.ts, lib/CssGrid/CssGrid_visualize.ts, lib/CssGrid/CssGrid_convertToHtml.ts, vite.config.ts, playwright.config.ts, testcases/level01.ts, testcases/level02.ts, testcases/level03.ts.
What it can do
Generate CSS grid layout
Grid configuration parameters → CSS grid layout structure
Calculate grid item positions
Grid items and container dimensions → Positioned grid items with coordinates
Process grid template definitions
Grid template rows and columns specifications → Computed grid track sizes and positions
Handle grid item placement
Grid items with placement properties → Grid items positioned in specific cells
Implement grid layout without browser dependency
Layout requirements and constraints → Grid layout solution for non-browser environments
Tags
Tech Stack
Comments (0)
No comments yet
Editorially curated, with community endorsements as a secondary signal. Corrections welcome.