# @carbon/grid 中文文档

规范地址：https://npmcn.com/package/%40carbon/grid/

版本：11\.66\.0
npm 元数据更新时间：2026-11-04T14:06:32.907Z
中文译文更新时间：2026-11-09T02:37:02.698Z
软件包许可：Apache-2\.0

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40carbon/grid
原文对照：https://npmcn.com/package/%40carbon/grid/?lang=original
项目主页：https://github.com/carbon-design-system/carbon#readme
源码仓库：https://github.com/carbon-design-system/carbon

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：121 kB，27 个文件
- TypeScript 类型：未声明
- 运行依赖：2 个
- 首次发布：2018-10-01T17:23:19.095Z
- 最新版本发布：2026-11-04T14:06:32.316Z
- 近 30 天下载量：865813（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：321（近 12 个月 44 个）

## 中文简介

使用碳设计系统提供数字和软件产品的网格

## 安装

```sh
npm install @carbon/grid
```

也可以使用：`pnpm add @carbon/grid`、`yarn add @carbon/grid`、`bun add @carbon/grid`

## README

# @ 碳/ 电网

> 使用碳设计系统提供数字和软件产品的网格

## 开始

要安装 `@carbon/grid` 在您的工程中, 您需要运行以下 命令使用 [无](https://www.npmjs.com/)数字 :

```bash
npm install -S @carbon/grid
```

如果你喜欢 [雅伦](https://yarnpkg.com/en/),使用以下命令 相反:

```bash
yarn add @carbon/grid
```

然后,您可以通过在您的 Sass 文件中做以下工作来包含网格 :

```
@use '@carbon/grid';

// Emit the flex-grid styles
@include grid.flex-grid();
```

## 使用量

_关于这一点,可以找到更多的实例和文件 [现场演示网站](https://carbon-elements.netlify.app/grid/examples/preview/)。 。 。 ._

`@carbon/grid` 具有三种原始类类型 应用。 其中包括:

-   `cds--grid`,定义总体网格上下文并设置一些有用的属性 如宽度和边距
-   `cds--row`,定义网格中的一行项目
-   `cds--col`,用于定义单列

你可以使用这些课程的组合来构建布局. 例如,如果我们 需要一个小断点的 4 列布局, 我们可以使用以下 标记 :

```html
<div class="cds--grid">
  <div class="cds--row">
    <div class="cds--col">1/4</div>
    <div class="cds--col">1/4</div>
    <div class="cds--col">1/4</div>
    <div class="cds--col">1/4</div>
  </div>
</div>
```

虽然这种布局可以适用于一些网格使用方案,但我们可能想要 更能控制我们布局在每个给定时将跨出多少列 断点.

默认, `@carbon/grid` 使用 `@carbon/layout`。 。 。 . 有五个断点: `sm`, (中文(简体) ), `md`, (中文(简体) ), `lg`, (中文(简体) ), `xlg`,以及 `max`。您可以使用每个 一个并用一列来指定在一栏中需要跨行的列数 给定了断点。 例如,我们可以将上述例子改写为:

```html
<div class="cds--grid">
  <div class="cds--row">
    <div class="cds--col-sm-1">1/4</div>
    <div class="cds--col-sm-1">1/4</div>
    <div class="cds--col-sm-1">1/4</div>
    <div class="cds--col-sm-1">1/4</div>
  </div>
</div>
```

这个 `.cds--col-sm-1` 班名告诉我们 `<div>` 只能跨一个 栏 `sm` 断点。 默认,当我们超越断点时 布局仍将占用总宽度的一定百分比.

## 实例

如果你想要更多关于如何使用的例子 `@carbon/grid`我们有一些 实例可以查看:

-   [丝网](https://npmcn.com/package/%40carbon/grid/examples/css-grid)

## 捐款

我们总是寻找贡献者 帮助我们修复错误, 建立新的特性, 或者帮助我们改进项目文件。 如果你有兴趣,肯定 看看我们 [贡献指南](https://npmcn.com/.github/CONTRIBUTING.md)!

## 许可证

凭 [Apache 2.0 许可证](https://npmcn.com/LICENSE)。 。 。 .

## ![IBM Telemetry](https://raw.githubusercontent.com/ibm-telemetry/telemetry-js/main/docs/images/ibm-telemetry-light.svg) IBM 遥测

本套件使用 IBM 遥测来收集去识别和匿名的度量衡 数据。 通过安装此包作为依赖, 您同意远程测量 藏书。 选择退出,看 [选择退出IBM遥测数据收集](https://github.com/ibm-telemetry/telemetry-js/tree/main#opting-out-of-ibm-telemetry-data-collection)。 。 。 . 有关所收集数据的更多信息,请参见: [IBM 遥测文档](https://github.com/ibm-telemetry/telemetry-js/tree/main#ibm-telemetry-collection-basics)。 。 。 .

## 常见问题

### @carbon/grid 是什么？

使用碳设计系统提供数字和软件产品的网格

### 如何安装 @carbon/grid？

在项目目录运行 npm install @carbon/grid，或使用 pnpm add / yarn add / bun add。

### @carbon/grid 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/carbon\_\_grid 是否存在。

### @carbon/grid 可以商用吗？

@carbon/grid 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

### @carbon/grid 的下载量有多少？

根据 npm 官方下载统计，@carbon/grid 在 2026/10/09 – 2026/11/07 这 30 天内被下载 865,813 次，日均约 28,860 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @carbon/grid 还在维护吗？

最新版本 11\.66\.0 发布于 2026/11/04（4 天前）；至今共发布 321 个版本，其中过去 12 个月发布了 44 个；首次发布于 2018/10/02。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。