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
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.
@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:
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:
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:
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! 👀
This package uses IBM Telemetry to collect 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.
For more information on the data being collected, please see the
IBM Telemetry documentation.
Grid for digital and software products using the Carbon Design System
We found that @carbon/grid demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago.It has 14 open source maintainers collaborating on the project.
Last updated on 11 Mar 2024
Did you know?
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.
In an unprecedented surge, May 2024 saw the publication of over 5,000 CVEs, marking a historic milestone in cybersecurity with an average of 164 CVEs per day, nearly double the 2023 daily average.
The White House is addressing fragmented cybersecurity regulations as CISOs report spending up to 50% of their time on compliance, aiming to harmonize requirements and improve cybersecurity outcomes.
The Socket Research Team has identified a malicious Python package that is typosquatting the popular crytic-compile utility, frequently used in popular toolkits and development environments for smart contracts and crypto applications.
By Socket Research Team, Sarah Gooding - Jun 04, 2024