@ 碳/ 电网

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

开始

要安装 @carbon/grid 在您的工程中, 您需要运行以下 命令使用 无数字 :

npm install -S @carbon/grid

如果你喜欢 雅伦,使用以下命令 相反:

yarn add @carbon/grid

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

@use '@carbon/grid';

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

使用量

关于这一点,可以找到更多的实例和文件 现场演示网站。 。 。 .

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

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

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

<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。您可以使用每个 一个并用一列来指定在一栏中需要跨行的列数 给定了断点。 例如,我们可以将上述例子改写为:

<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我们有一些 实例可以查看:

• 丝网

捐款

我们总是寻找贡献者 帮助我们修复错误, 建立新的特性, 或者帮助我们改进项目文件。 如果你有兴趣,肯定 看看我们 贡献指南!

许可证

凭 Apache 2.0 许可证。 。 。 .

IBM 遥测

本套件使用 IBM 遥测来收集去识别和匿名的度量衡 数据。 通过安装此包作为依赖, 您同意远程测量 藏书。 选择退出,看 选择退出IBM遥测数据收集。 。 。 . 有关所收集数据的更多信息,请参见: IBM 遥测文档。 。 。 .