Back to Details

css-grid-math

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

CSS Grid Math

CSS Grid 布局计算

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.
  1. 阅读
    guidelines.md
    以选择最相关的最小文件集。
  2. 加载
    references/grid-layout/rules.md
    获取实现决策相关内容。
  3. 编辑代码时加载
    references/grid-layout/examples.md
    。
  4. 进行多步骤推导或调试时，使用
    workflows/debug-grid-layout.md
    。

Contents

目录

ResourcePurpose
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
资源用途
guidelines.md
将任务引导至对应的参考文件
references/source-map.md
书籍来源及章节/段落可追溯性
references/grid-layout/knowledge.md
核心概念与术语
references/grid-layout/rules.md
实用规则、指南及例外情况
references/grid-layout/examples.md
错误/正确示例及重构方法
references/grid-layout/patterns.md
可复用公式与实现模式
references/grid-layout/checklist.md
审核清单与警示信号
workflows/debug-grid-layout.md
分步工作流程

Source

来源

Derived from Math for Web Design by Paul McFedries, Chapter 4: CSS Grid math. Citations are tracked in 
references/source-map.md
.
改编自Paul McFedries所著的《Math for Web Design》第4章：CSS Grid数学计算。引用信息记录在
references/source-map.md
中。