Carbon Grid package helps developers build layouts with CSS Grid
The Carbon Grid package helps developers build digital experiences with the 2x Grid. The project allows you to use CSS Grid to build a variety of layouts.
2x-grid
18 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
Grid and Column components define column widths by breakpoint
Carbon provides grid components, using CSS Grid. These components include Grid and Column and allow you to define column widths by breakpoint, based on a 16 column grid.
@carbon/react includes grid package functionality
If you are using @carbon/react, you probably do not need to install the grid package separately.
Carbon grid reduces need for custom CSS
The Carbon grid is an important tool for placing elements on the screen. When used correctly, complex layouts can be achieved with little or no custom CSS including display: flex, position declarations, and size/width overrides.
AspectRatio component for fluid layouts
The AspectRatio component supports rendering content in a specific aspect ratio through the ratio prop. This allows you to specify the proportion between the width and the height of your content.
breakpoint-down mixin applies styles at specified breakpoint or below
The @include breakpoint-down('md') mixin applies styles inside the mixin on md breakpoint or below, such as max-width properties.
breakpoint mixin applies styles at specified breakpoint and above
The @include breakpoint('lg') mixin applies styles inside the mixin on lg breakpoint and above.
Hide at Breakpoint helpers control display at given breakpoint
You can use Helpers such as @include helper-classes.hide-at-sm() to control what is being displayed on the screen at a given breakpoint.
CSS Grid is default in v11, FlexGrid is legacy
The default grid in v11 is based off of CSS Grid. To enable the legacy FlexGrid implementation built using Flexbox, you need to include @include grid.flex-grid() in your Sass files.
FlexGrid example usage requires Sass import
To emit the flex-grid styles, you must use @use '@carbon/grid' followed by @include grid.flex-grid() in your Sass files.
@carbon/layout package overview
The @carbon/layout package provides spacing tokens and conversion utilities for the Carbon Design System. It helps teams build consistent experiences through spacing and alignment. If using @carbon/react, the layout package is likely already included and does not need separate installation.
Spacing tokens API - fixed spacing
The @carbon/layout package exports fixed spacing tokens: $spacing-01, $spacing-02, $spacing-03, $spacing-04, $spacing-05, $spacing-06, $spacing-07, $spacing-08, $spacing-09, $spacing-10, $spacing-11, $spacing-12, $spacing-13, and a $spacing map. All fixed spacing tokens have !default set to true, allowing override through Sass configuration.
Spacing tokens API - fluid spacing
The @carbon/layout package exports fluid spacing tokens: $fluid-spacing-01, $fluid-spacing-02, $fluid-spacing-03, $fluid-spacing-04, and a $fluid-spacing map. All fluid spacing tokens have !default set to true, allowing override through Sass configuration.
Spacing tokens API - utility functions
The @carbon/layout package exports conversion utility functions: @function em and @function rem. These helpers convert pixel values to relative units.
Base font size token
The $base-font-size token is exported from @carbon/layout and has !default set to true, allowing configuration via Sass Modules.
How to import @carbon/layout in SCSS
Use @use '@carbon/layout' to import the layout package in SCSS files. Tokens are accessed with the layout namespace, such as layout.$spacing-05 for margins or layout.rem(24px) for unit conversion.
SCSS @carbon/layout usage example
@use '@carbon/layout'; .selector { margin-bottom: layout.$spacing-05; width: layout.rem(24px); height: layout.rem(24px); }
Configure @carbon/layout base font size
@use '@carbon/layout' with ( $base-font-size: 18px );