# CSS Grid Math

> Derive and debug CSS Grid layout math for grid coordinates, line placement, spans, negative indexes, fr units, minmax(), fit-content(), repeat(), auto-fill, and auto-fit. Use when building grid systems, explaining track sizing, troubleshooting fr distribution, placing items by line numbers, or converting a layout sketch into CSS Grid formulas.

- Skill: `lvtd-llc/css-grid-math` (Agent Skill, multi-file: 10 files)
- Install (CLI): `npx skillmds@latest add lvtd-llc/css-grid-math`
- Raw SKILL.md: https://api.skillmd.com/api/skills/lvtd-llc/css-grid-math/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- License: MIT
- Author: LVTD-LLC (https://skillmd.com/u/lvtd-llc)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/lvtd-llc/css-grid-math

---


# CSS Grid Math

Use this skill when a grid needs to be reasoned about as a coordinate and sizing system. It helps calculate where items land, how tracks divide space, and why flexible tracks do not always produce expected widths.

## Quick Start

1. Read `guidelines.md` to select the smallest relevant file set.
2. Load `references/grid-layout/rules.md` for implementation decisions.
3. Load `references/grid-layout/examples.md` when editing code.
4. Use `workflows/debug-grid-layout.md` for multi-step derivation or debugging.

## Contents

| Resource | Purpose |
|----------|---------|
| `guidelines.md` | Routes tasks to the right reference files |
| `references/source-map.md` | Book source and chapter/section traceability |
| `references/grid-layout/knowledge.md` | Core concepts and terminology |
| `references/grid-layout/rules.md` | Practical rules, guidelines, and exceptions |
| `references/grid-layout/examples.md` | Bad/good examples and refactoring approach |
| `references/grid-layout/patterns.md` | Reusable formula and implementation patterns |
| `references/grid-layout/checklist.md` | Review checklist and red flags |
| `workflows/debug-grid-layout.md` | Step-by-step workflow |

## Source

Derived from *Math for Web Design* by Paul McFedries, Chapter 4: CSS Grid math.
Citations are tracked in `references/source-map.md`.