SkillsAdd

lvtd-llc/skills

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.

First seen Jun 29, 2026

Installation

$ npx skills add lvtd-llc/skills --skill css-grid-math
View on skills.sh ↗ GitHub repository ↗

Summary

  • 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.

Similar popular skills

Related neighbors and high-traction skills in the same topics — useful to compare before installing.

agent-browser Shared topics
vercel-labs/agent-browser

Browser automation CLI for AI agents. Use when the user needs to interact with websites, includ…

810.4K installs
azure-diagnostics Shared topics
microsoft/azure-skills

Debug Azure production issues on Azure using AppLens, Azure Monitor, resource health, and safe …

568.9K installs
azure-validate Shared topics
microsoft/azure-skills

Pre-deployment validation for Azure readiness. Run deep checks on configuration, infrastructure…

567.7K installs
supabase-postgres-best-practices Shared topics
supabase/agent-skills

Postgres best practices maintained by Supabase, for Postgres running anywhere. Load this skill …

391.6K installs
layout-grid Similar name
owl-listener/designer-skills

Define a responsive grid — columns, gutters, margins, and breakpoint behaviour. Use when establ…

1.7K installs
grid Similar name
kostja94/marketing-skills

When the user wants to design, optimize, or audit grid layouts for content display. Also use wh…

909 installs

Also in this package

Other skills from lvtd-llc/skills · top by installs.

npx skills add lvtd-llc/skills
game-balance-economy 119 django-htmx 78 game-mechanics-design 74 calibredb 71 alpinejs-django 68 game-playtest-planning 67 game-story-world-character 67 book-toc-lab 66 b2b-sales-constraint-diagnosis 63 make-product-viral 63

Browse all from lvtd-llc/skills

More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Declared
Cursor Not declared
Codex Declared
GitHub Copilot Not declared
Windsurf Not declared
Gemini CLI Not declared
Cline Not declared
OpenCode Not declared

Repository health

Stars 1
License LICENSE
Default branch main
Open issues 0
Status Active

Skill metadata

Parsed from SKILL.md frontmatter.

Version0.1.0
LicenseMIT
CompatibilityCodex, Claude Code, and other Agent Skills-compatible clients.
Declared agents claude-code codex
More metadata
version
0.1.0
displayName
CSS Grid Math
category
Frontend
tags
frontend,css,grid,layout,math

Package contents

Files included with this skill beyond the listing page.

  • skill md SKILL.md 1,943 B
  • docs SUMMARY.md 366 B

History

  1. First seen on skills.sh
  2. First recorded snapshot · 43 installs

SKILL.md

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.