Security News
Fluent Assertions Faces Backlash After Abandoning Open Source Licensing
Fluent Assertions is facing backlash after dropping the Apache license for a commercial model, leaving users blindsided and questioning contributor rights.
@carbon/grid
Advanced tools
Grid for digital and software products using the Carbon Design System
Grid for digital and software products using the Carbon Design System
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();
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 margincds--row
, defines a row of items in a gridcds--col
, used to define individual columnsYou 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="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:
<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.
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! 👀
Licensed under the Apache 2.0 License.
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. For more information on the data being collected, please see the IBM Telemetry documentation.
FAQs
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 0 open source maintainers collaborating on the project.
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.
Security News
Fluent Assertions is facing backlash after dropping the Apache license for a commercial model, leaving users blindsided and questioning contributor rights.
Research
Security News
Socket researchers uncover the risks of a malicious Python package targeting Discord developers.
Security News
The UK is proposing a bold ban on ransomware payments by public entities to disrupt cybercrime, protect critical services, and lead global cybersecurity efforts.