Skip to main contentCarbon Design System

2x Grid

The IBM 2x Grid system is a fully responsive, robust, 16 column layout system with five default breakpoints and dozens of predefined classes.

Under the hood

Our grid is built with Flexbox and closely mirrors Bootstrap’s grid in that it uses containers, rows and columns to layout and align content. Below is an in-depth look at how it all comes together.

If you’re new to Flexbox, this CSS Tricks Flexbox guide will provide more detail around everything from basic terminology to code.

Getting started

With Carbon-components

We provide multiple ways for you to use the grid for the Carbon Design System. By default, the grid code is included when you use carbon-components. To get started, you’ll need to install this package using npm:

npm install carbon-components --save

Or, if you prefer Yarn:

yarn add carbon-components

You can include the grid in one of two ways:

// If you're including all the styles for Carbon
@import 'carbon-components/scss/globals/scss/styles.scss';
// If you're wanting to import the grid
@import 'carbon-components/scss/globals/grid/grid';

To use 16 column variant of the grid, you need to enable the grid-columns-16 feature flag before including any imports in your Sass files. For example:

$feature-flags: (
grid-columns-16: true,
);
// If you're including all the styles for Carbon
@import 'carbon-components/scss/globals/scss/styles.scss';
// If you want to import the grid
@import 'carbon-components/scss/globals/grid/grid';

Without Carbon-components

If you’d like to use the grid without including carbon-components, we offer the @carbon/grid package. You can install this with npm:

npm install @carbon/grid --save

Or, if you prefer Yarn:

yarn add @carbon/grid

You can then include the 16 column grid by doing the following in your Sass files:

@import '@carbon/grid/scss/grid';

How it works

We won’t spend a lot of time here recapping the basics of the Bootstrap grid. Instead we’ll emphasize the features that make this system unique, especially concerning gutter structure, type alignment, and the UI Shell.

Basic grid explainer

The below example creates four equal-width columns at small, medium, large, and extra large breakpoints using our predefined grid classes. The columns are centered in the page within the parent container.

1 of 4
2 of 4
3 of 4
4 of 4
<div class="bx--grid">
<div class="bx--row">
<div class="bx--col">1 of 4</div>
<div class="bx--col">2 of 4</div>
<div class="bx--col">3 of 4</div>
<div class="bx--col">4 of 4</div>
</div>
</div>

Container

bx--grid defines the overall grid context at the top level and applies the proper margin and our default max-width (1584px.) You can also remove this max width, by using the grid modifier class bx--grid--full-width.

Rows

bx--row defines a row of items inside the grid — think of rows as wrappers for columns. Each column has horizontal padding (aka a gutter) that defines the space between them. You can negate this padding at the row level with negative margins, allowing the content within your columns to be aligned along the left side.

Columns

bx--col defines individual columns inside a row. Use as many columns as you’d like out of the possible 16 per row. With Flexbox columns widths are set in percentages relative to their parent element so columns without a spec’d width will automatically be equal. For example, four instances of bx--col will will give you four equal width columns — each 25% of the parent from the small breakpoint on up. See the auto-layout columns for more on this.

Responsive options

BreakpointsClass prefix# of colsGutter width*
Small (<672).bx--col-sm-432px
Medium (672 - 1056px).bx--col-md-832px
Large (1056 - 1312px).bx--col-lg-1632px
X-Large (1312 - 1584px).bx--col-xlg-1632px
Max (>1584).bx--col-max-1632px

* Gutter width is 32px — with 16px on each side of a column — at every breakpoint.



Responsive classes

Here’s a look at all the width classes available for our 16 column grid. Use the column helpers to specify different column spans at different widths.

If you want to change it up, use a combination of different classes for each grid tier as needed. See the markup below. Note: 3 and 5 column arrangements are discouraged, however, in specific instances, you are allowed to generate a three columns within our system.

16
8
4
15
7
3
1
14
6
2
13
5
3
12
4
11
5
10
6
9
7
8
4
2
8
4
2
4
2
1
4
2
1
4
2
1
4
2
1
2
1
2
1
2
1
2
1
2
1
2
1
2
1
2
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
<div class="bx--grid">
<div class="bx--row">
<div class="bx--col-lg-16">16</div>
</div>
<div class="bx--row">
<div class="bx--col-lg-15 bx--col-md-7 bx--col-sm-3">15</div>
<div class="bx--col-sm-1 bx--col-md-1 bx--col-lg-1">1</div>
</div>
<div class="bx--row">
Do feel free to mix and match column structure.

Do feel free to mix and match column structure.

As a general rule, don’t mix with 3 or 5 columns.

As a general rule, don’t mix with 3 or 5 columns.

Equal width columns

Use these classes for easy column sizing when you want to maintain the same grid tiers at every breakpoint. In the example below, the grid layouts apply to every breakpoint: from sm to max. Add any number of unit-less classes per row you need and every column will be the same width.

1 of 8
1 of 8
1 of 8
1 of 8
1 of 8
1 of 8
1 of 8
1 of 8
1 of 4
1 of 4
1 of 4
1 of 4
1 of 2
1 of 2
1 of 1
<div class="bx--grid">
<div class="bx--row">
<div class="bx--col">1 of 8</div>
<div class="bx--col">1 of 8</div>
<div class="bx--col">1 of 8</div>
<div class="bx--col">1 of 8</div>
<div class="bx--col">1 of 8</div>
<div class="bx--col">1 of 8</div>
<div class="bx--col">1 of 8</div>

Grid modes

Carbon’s Sketch templates always have a 32px gutter by default, regardless of breakpoint. The default gutter width is 32px because type, within or without containers, never has less than a 32px gutter. For containers and components, however, there are three different gutter structures: Wide (default), Narrow and Condensed. These three gutter scenarios enable typographic alignment by allowing containers and certain components to “hang” into the gutter.


Wide (default)
32px gutter

Wide grid mode

Narrow
16px gutter

Narrow grid mode

Condensed
1px gutter

Condensed grid mode

The Wide grid

This is our default grid mode, with 16 columns and 32px gutters. Unless your design specifies something different, this is the grid you should go with — it’s also arguably the easiest to use. Here, the container edge does not extend into the gutter, so the type within the container does not sit on the columns.

Rows that are adjacent will have 32px of margin between them to match gutter. Use vertical helpers here.

<div class="bx--grid">
<div class="bx--row">
<div class="bx--col"></div>
<div class="bx--col"></div>
<div class="bx--col"></div>
<div class="bx--col"></div>
</div>
</div>

Usage

Use the Wide grid mode when you are dealing with separate pieces of information with separate destinations. This grid mode is also good for text-heavy situations, where maximum breathing room helps provide clarity and legibility. Also, basic images (without text on them) always use this grid mode.

32px gutter
Do align type (outside of a container), components and tiles to the columns.

Do align type (outside of a container), components, and tiles to the columns.

Do not take type off of the column structure to achieve alignment.

Do not take type off the column structure to achieve alignment.

The Narrow grid

This is the gutter scenario that requires the most explanation. Although it’s caused a lot of confusion, the intent is simply to enable more typographic alignment. With the Narrow grid, the container, not the type, hangs 16px into the gutter; allowing headings and copy outside of containers to align with the copy within containers and components. This arrangement can easily be mirrored to accommodate languages that read right to left, like Arabic or Hebrew.

Rows that are adjacent will have 16px of margin between them to match gutter. Use vertical helpers here.