# @gridui/grid 中文文档
规范地址：https://npmcn.com/package/%40gridui/grid/
版本：2\.3\.0
npm 元数据更新时间：2026-11-01T06:24:47.393Z
中文译文更新时间：2026-11-01T07:05:47.578Z
软件包许可：UNLICENSED
本文由上游 README 机器翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。
原始 npm 页面：https://www.npmjs.com/package/%40gridui/grid
原文对照：https://npmcn.com/package/%40gridui/grid/?lang=original
## 关键信息（来自 npm 元数据）
- 包体积（解压后）：144 kB，44 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：4 个
- peer 依赖：react ^19\.0\.0，react-dom ^19\.0\.0
- 首次发布：2026-10-21T16:36:16.915Z
- 最新版本发布：2026-11-01T06:24:47.231Z
- 已发布版本数：12（近 12 个月 12 个）
## 中文简介
GridUI React网格
## 安装
```sh
npm install @gridui/grid
```
也可以使用：`pnpm add @gridui/grid`、`yarn add @gridui/grid`、`bun add @gridui/grid`
## README
# 电网的基础
看到 [使用手册](https://npmcn.com/package/docs/usage/README.md) 和 [网格的合同](https://npmcn.com/package/%40gridui/grid/docs/README.md) 用于实际使用。
`@gridui/grid` 拥有Container， Grid, GridItem, Split, Stack, Row， PageFrame, FrameSection, FrameSection, frame chrome, rails, textures， FrameRegion/FrameRegionRow用于合成边缘几何； 以及用于结构边界的公共FrameBoundary原语。它不知道网站路由或域名状态。 加载它的显式 `styles.css` 导出后的主题和之前的风格组成的家庭。 主题提供令牌值； `@gridui/style-utils/responsive` 提供了 无反应间隔和断点值计算。
对二维轨道使用网格，对线性轨道使用分割 区域序列。分裂的 `direction` 和 `seam` 接受标量或响应 值;它只拥有直接子区域之间的接缝。把功能 控件和表在这些区域内，使其自己的边界保持完整。 看到 [线性区域](https://npmcn.com/package/%40gridui/grid/docs/README.md#linear-regions) 查看完整的合同。
接受FrameSection和FrameFooter `tone="neutral" | "brand" | "warning" | "danger"`. 非中性色调重复使用主题的公共 `paletteClass` 背景合同； 前景、静音文本、边框、控件和焦点颜色。Theme拥有两者 调色板值及其范围语义映射；网格拥有区域几何。 嵌套的非中性色调建立了自己的调色板； `tone="neutral"` 继续 继承周围的环境。使用 `paletteClass("neutral")` 从 `@gridui/theme` 在本机内容表面上显式重置为已注册的应用程序 中性色，不添加部分或边界。
FrameSection拥有自己的前置分隔符和内联框架边缘。使用 `boundary="none"` 和 `edges="none"` 当一个封闭区域拥有它们时。 FrameSection和FrameFooter都接受这些主要的边界样式：
| `boundary` | 外观 |
| --- | --- |
| `line` (默认) | 一条细规 |
| `band` | 主题色12px带顶部和底部规则 |
| `stripe` | 相同的波段几何形状，连续135度的品牌彩色条纹 |
| `space` | 透明40px间距，没有规则或填充 |
| `none` | 没有边界元素或额外的间距 |
`--gridui-band-size` 拥有条带和条带高度； `--gridui-boundary-space-size` 拥有空格高度。条纹和空间默认为无边缘装饰。 Band仍然默认为节点。集 `decoration` 明确地选择一个边缘处理。
```tsx
Next chapter
Related reading
```
在分段缝处，非中性调优先于中性调；之间的 两个非中性色调，下半部分提供颜色。下半部分 仍然绘制唯一的分隔符。这可以跨React节组工作 更改任一区域的内容调色板。Astro主机元素需要an [application-owned适配器](https://npmcn.com/package/docs/usage/framework-adapters.md)． 页面填充符使用 最后一节的基调为它的主线。 网格 `frame="cells"` 拥有外部和细胞边缘； `frame="internal"` 拥有接缝 在现有框架内。使用 `fillLastRow` 有直接的GridItem子元素 在每个断点处填充不完整的行。中不允许有明确的间隙 框架网格。要使用容器驱动的轨道计数包装列表，请使用 `columns="auto"` 与 `minItemWidth` 和可选的响应间隙。最小值是 限制为可用空间。 `Grid asChild` 和 `GridItem asChild` 保留本机 Ul /ol/li主机没有包装器元素。自适应模式不包括帧和 `fillLastRow`;根 `asChild` 也排除了 `fillLastRow`，保留固定的 规划师的直接项目合同。悬停/聚焦轮廓绘制在相邻的接缝和页面线条之上。 Table细胞系属于Table；功能控制边界属于它们的核心家族。
看到 [网格的合同](https://npmcn.com/package/%40gridui/grid/docs/README.md#grid-foundation) 用于几何和API。
## 组织来源
包根目录 `src/index.ts` 声明公共API，以及 `src/styles.css` 导入组件样式。两个入口点都不包含组件实现。
每个公共组件都有一个匹配的目录，比如 `src/grid/`， `src/grid-item/`， `src/split/`, `src/frame-section/`． 私处，风格， 而帮手则待在主人身边。 `src/shared/` 只包含合作者 多组件使用：轨道规划，继承框架几何，区域 色调和共享边界/铬规则。响应间隔来自Style-utils。
跨包的浏览器fixture位于根目录 `scripts/development/preview/fixtures` 并使用公共出口。浏览器 规范单独存在于 `scripts/testing/browser/specs`.
单元测试反映了下面的这些所有者 `test/unit/primitives/` 和 `test/unit/frame/`． 测试可以组合公共原语来保护它们的 协作。在船东的CVA中保留普通单据 `style.ts`． 保留 导入的并置CSS中的轨道分辨率、接缝和装饰几何 根样式表。看到 [源约定](https://npmcn.com/package/docs/development/typescript-conventions.md#component-directories). 消费者使用包根和显式样式表导出；内部文件 路径是私有的。
看到 [季度发布历史](https://npmcn.com/package/%40gridui/grid/.changeset/history/) 准备发行票据和消费记录。
`DashboardFrame` 提供全高的工作空间排水沟和结构边缘 创建一个主要地标。看到 [仪表板框架](https://npmcn.com/package/%40gridui/grid/docs/README.md#dashboard-frames).
## 常见问题
### @gridui/grid 是什么？
GridUI React网格
### 如何安装 @gridui/grid？
在项目目录运行 npm install @gridui/grid，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^19\.0\.0）、react-dom（^19\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。
### @gridui/grid 支持 TypeScript 吗？
支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。
### @gridui/grid 支持 ESM 还是 CommonJS？
以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。
### @gridui/grid 可以商用吗？
@gridui/grid 使用 UNLICENSED 许可。作者声明为 UNLICENSED，即不授予公开使用许可（与公共领域的 Unlicense 不同）。使用前需获得作者授权。以上为概括，不构成法律意见，请以许可原文为准。
### @gridui/grid 还在维护吗？
最新版本 2\.3\.0 发布于 2026/11/01（2 天前）；至今共发布 12 个版本，其中过去 12 个月发布了 12 个；首次发布于 2026/10/22。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。