Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@carbon/grid

Package Overview
Dependencies
Maintainers
11
Versions
244
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@carbon/grid

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

  • 0.0.1-alpha.9
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
38K
decreased by-52.62%
Maintainers
11
Weekly downloads
 
Created
Source

@carbon/grid

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

Getting Started

Run the following command using npm:

npm install -S @carbon/grid

If you prefer Yarn, use the following command instead:

yarn add @carbon/grid

Usage

@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>
  </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:

<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>
  </div>
</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.

Class reference

Class nameDescription
.bx--gridUse at the top-level of your project to define a grid for a section of the page
.bx--grid--bleedCollapse all the gutters in the layout. Useful alongside .bx--grid--padding
.bx--grid--paddingApply padding to the content of every column in the layout
.bx--grid--hangTell the grid to drop the left (or right) gutter from the overall layout. Useful for hanging type
.bx--rowDefine a row inside of a grid.
.bx--col, .bx--col--autoDefine a column that spans as much width as available
.bx--col-<breakpoint>-<span>Define a column at a breakpoint that spans the given number of columns
.bx--offset-<breakpoint>-<span>Define an column at a breakpoint that spans the given number of columns. Can be used on a non-empty column.

🤲 Contributing

To learn more about how to contribute, look here!

FAQs

Package last updated on 18 Nov 2018

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc