2x 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.
Documentation
CSS Grid
Carbon provides grid components, using CSS Grid to help developers use the 2x
Grid. These components include Grid and Column and allow you to define
column widths by breakpoint, based on a 16 column grid.
AspectRatio
When designing fluid layouts, it’s helpful for an asset or card to be a specific
aspect ratio. The AspectRatio component supports rendering your 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.
API & Helpers
There are many ways to make the 2x Grid work for your application using our API. The examples below illustrate two ways of removing visibility of a given component based on the breakpoint.
.component {display: block;/* applies styles inside mixin on md breakpoint or below, like max-width */@include breakpoint-down('md') {display: none;}}
In addition, you can also use Helpers to control what is being displayed on the screen at a given breakpoint.
@use '@carbon/styles/scss/utilities/helper-classes';.my-class {@include helper-classes.hide-at-sm();}
Legacy
Flexbox Grid
The default grid in v11 is based off of CSS Grid, to enable the legacy FlexGrid implementation, built using Flexbox, you will need to include the following in your Sass files:
@use '@carbon/grid';// Emit the flex-grid styles@include grid.flex-grid();
