Carbon Design System
Preview

2x Grid

Last updated Jul 1, 2026

Explore the IBM Design 2x Grid, the geometric foundation behind typography, layouts, icons, and illustrations. See how it provides structure, consistency, and guidance across every aspect of IBM Design.

2x Grid

If you’re using @carbon/react, you you probably don’t need to install the grid package separately. See our Carbon React guide to start building.

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.

React

React icon

CSS Grid demo

IBM bee icon

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 (display: flex, position declarations, size/width overrides, etc.)

Aspect Ratio

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.

React

React icon

Vue

Vue icon

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.

In addition, you can also use Helpers to control what is being displayed on the screen at a given breakpoint.

Carbon grid package

GitHub icon

Carbon grid docs API

GitHub icon

Hide at Breakpoint Helpers on Storybook

React icon

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:

React

React icon

Angular

Angular icon

Vue

Vue icon

FlexGrid demo

IBM bee icon
2x Grid | Carbon Design System