gridcalc

CSS Grid & Flexbox Calculator CLI
Generate responsive layout CSS from simple parameters. Zero runtime dependencies.

日本語

---

Features

• Grid Calculator — Compute grid-template-columns, gap, max-width, and padding from column count and gutter size
• Flexbox Calculator — Compute flex-basis, gap, and wrap mode with optional breakpoint variants
• Responsive Generator — Produce fluid breakpoint variants using configurable min/max widths
• CSS Validator — Detect sub-pixel gaps, missing grid templates, and flex anti-patterns
• Multiple Output Formats — CSS custom properties, SCSS variables, and Tailwind config snippets
• Pipeline-Ready — Output to stdout or file for easy build-system integration

Installation

pip install gridcalc

Or install from source:

git clone https://github.com/izag8216/gridcalc.git
cd gridcalc
pip install -e ".[dev]"

Quickstart

Generate a 12-column grid

gridcalc grid --columns 12 --gutter 24px --max-width 1200px --output grid.css

Generate a flexbox layout

gridcalc flexbox --items 4 --gap 16px --wrap --output flex.css

Generate responsive breakpoint variants

gridcalc responsive --base 4 --fluid --min 320 --max 1440 --output tokens.css

Validate an existing CSS file

gridcalc validate styles.css --report issues.md

Usage

See docs/usage.md for the full command reference and docs/api.md for the Python API.

Examples

Check the examples/basic/ directory for common use cases.

Contributing

See CONTRIBUTING.md for setup and guidelines.

License

MIT License. See LICENSE for details.