# @carbon/grid

> Grid for digital and software products using the Carbon Design System

Latest version **11.64.0** (published 2026-10-07) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @carbon/grid
pnpm add @carbon/grid
yarn add @carbon/grid
bun add @carbon/grid
```

## Health

**Score 60/100 (C)** — status: active.

Positive: no vulnerabilities; has provenance; recently updated; high maintenance score.

Warnings: low downloads; no types; no esm support.

## Facts

| | |
|---|---|
| Version | 11.64.0 |
| Published | 2026-10-07 |
| First published | 2018-10-01 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 118.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | yes |
| Provenance | attested (GitHub Actions) |
| Maintainers | carbon-design-system, carbon-bot, leechase, jeffreychew, sstrubberg |
| Keywords | eyeglass-module, ibm, elements, carbon, carbon-elements, carbon-design-system, components, react |

## Links

- npm: https://www.npmjs.com/package/@carbon/grid
- Repository: https://github.com/carbon-design-system/carbon
- Homepage: https://github.com/carbon-design-system/carbon#readme
- Issues: https://github.com/carbon-design-system/carbon/issues
- npm.io page: https://npm.io/package/@carbon/grid

## Dependencies (2)

- [@carbon/layout](https://npm.io/package/@carbon/layout.md) ^11.61.0
- [@ibm/telemetry-js](https://npm.io/package/@ibm/telemetry-js.md) ^1.5.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 11.64.0 (latest) — 2026-10-07
- 11.64.0-rc.0 (next) — 2026-10-05
- 12.0.0-alpha.2 (v12-alpha) — 2026-09-30
- 10.43.5 (v10-next) — 2025-05-14
- 10.18.0-alpha.0 (nightly) — 2020-12-03
- 10.7.0-alpha.5708 (canary) — 2019-09-04
- 0.0.1-beta.5 (beta) — 2019-03-25
- 0.0.1-alpha.32 (alpha) — 2019-02-12
- 12.0.0-alpha.1 — 2026-09-30
- 12.0.0-alpha.0 — 2026-09-29
- 11.63.0 — 2026-09-23
- 11.63.0-rc.0 — 2026-09-21
- 11.62.0 — 2026-09-09
- 11.62.0-rc.0 — 2026-09-08
- 11.61.0 — 2026-08-27
- … 300 more at https://npm.io/package/@carbon/grid/versions

## README

# @carbon/grid

> Grid for digital and software products using the Carbon Design System

## Getting started

To install `@carbon/grid` in your project, you will need to run the following
command using [npm](https://www.npmjs.com/):

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

If you prefer [Yarn](https://yarnpkg.com/en/), use the following command
instead:

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

You can then include the grid by doing the following in your Sass files:

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

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

## Usage

_More examples and documentation can be found on this
[live demo website](https://carbon-elements.netlify.app/grid/examples/preview/)._

`@carbon/grid` has three primitive class types to use in order to structure your
application. They include:

- `cds--grid`, defines the overall grid context and sets some useful attributes
  like width and margin
- `cds--row`, defines a row of items in a grid
- `cds--col`, used to define individual columns

You can use a combination of these classes to build a layout. For example, if we
wanted a 4 column layout for a small breakpoint we could use the following
markup:

```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>
```

While this layout can work for some grid usage scenarios, we probably will want
more control over how many columns our layout will span at each given
breakpoint.

By default, `@carbon/grid` uses the breakpoints defined in `@carbon/layout`.
There are five breakpoints: `sm`, `md`, `lg`, `xlg`, and `max`. You can use each
one in combination with a column to specify the number of columns to span at a
given breakpoint. For example, we could rewrite the above example to be:

```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>
```

The `.cds--col-sm-1` class names tells us that this `<div>` should only span one
column at our `sm` breakpoint. By default, as we scale beyond the breakpoint the
layout will still take up a percentage of the overall width.

## 📚 Examples

If you're looking for more examples on how to use `@carbon/grid`, we have some
examples that you can check out:

- [css-grid](./examples/css-grid)

## 🙌 Contributing

We're always looking for contributors to help us fix bugs, build new features,
or help us improve the project documentation. If you're interested, definitely
check out our [Contributing Guide](/.github/CONTRIBUTING.md)! 👀

## 📝 License

Licensed under the [Apache 2.0 License](/LICENSE).

## <picture><source height="20" width="20" media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/ibm-telemetry/telemetry-js/main/docs/images/ibm-telemetry-dark.svg"><source height="20" width="20" media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/ibm-telemetry/telemetry-js/main/docs/images/ibm-telemetry-light.svg"><img height="20" width="20" alt="IBM Telemetry" src="https://raw.githubusercontent.com/ibm-telemetry/telemetry-js/main/docs/images/ibm-telemetry-light.svg"></picture> IBM Telemetry

This package uses IBM Telemetry to collect de-identified and anonymized metrics
data. By installing this package as a dependency you are agreeing to telemetry
collection. To opt out, see
[Opting out of IBM Telemetry data collection](https://github.com/ibm-telemetry/telemetry-js/tree/main#opting-out-of-ibm-telemetry-data-collection).
For more information on the data being collected, please see the
[IBM Telemetry documentation](https://github.com/ibm-telemetry/telemetry-js/tree/main#ibm-telemetry-collection-basics).

---
_Source: https://npm.io/package/@carbon/grid · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._