Skip to content
Branch: master
Find file History
joshblack feat(bundler): add inline command (#492)
* feat(bundler): add inline command

* feat(grid): add support for inline entrypoint

* feat(type): add support for inline entrypoint

* Update package.json

* fix(elements,type): update build step for sassdoc ignore
Latest commit 26ab0d5 Apr 18, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples feat(grid): update scss folder structure and mixins (#396) Mar 8, 2019
scss feat(bundler): add inline command (#492) Apr 18, 2019
.gitignore feat(bundler): add inline command (#492) Apr 18, 2019
.npmignore feat(sassdoc): render Sassdoc in markdown (#462) Apr 12, 2019
package.json feat(bundler): add inline command (#492) Apr 18, 2019


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:

npm install -S @carbon/grid

If you prefer Yarn, use the following command instead:

yarn add @carbon/grid


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

  • bx--grid, defines the overall grid context and sets some useful attributes like width and margin
  • bx--row, defines a row of items in a grid
  • bx--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:

<div class="bx--grid">
  <div class="bx--row">
    <div class="bx--col">1/4</div>
    <div class="bx--col">1/4</div>
    <div class="bx--col">1/4</div>
    <div class="bx--col">1/4</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:

<div class="bx--grid">
  <div class="bx--row">
    <div class="bx--col-sm-1">1/4</div>
    <div class="bx--col-sm-1">1/4</div>
    <div class="bx--col-sm-1">1/4</div>
    <div class="bx--col-sm-1">1/4</div>

The .bx--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.

📖 API Documentation

If you're looking for @carbon/grid API documentation, check out:

🙌 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 ! 👀

📝 License

Licensed under the Apache 2.0 License.

You can’t perform that action at this time.