Getting Started

Intro: Carbon Grid uses flexbox which is awesome and can do a lot, but this system is designed to only address the most common layout issues. If you need very specific flex features it's very easy to expand on the base styles. Flexbox is a relatively new addition to CSS, so make sure you check the browser support before using. It's been tested back to IE 9 and seems to work well.

Download:

https://raw.githubusercontent.com/Stegosource/carbon-grid/master/dist/css/carbon-grid.css

NPM:

npm install carbon-grid --save

Bower:

bower install carbon-grid --save

CDN:

<link rel="stylesheet" href="https://unpkg.com/carbon-grid/dist/css/carbon-grid.css">

Containers

Wraps content to a consistent width. It's not necessary to use the container, but your wrapper should have padding left and right of 15px.


<div class="container">
    <span class="example-content"></span>
</div>

Example:

Full Width Containers

Wraps content to for full width of sections.

                    
<div class="container-fluid">
    <span class="example-content"></span>
</div>

Example:

Responsive Flexible Grid

Rows and columns create responsive flexbox grids. Because it is built on flexbox (which is awesome), column widths adjust automatically.

                    
<div class="container">
    <div class="row">
        <div class="column">
            <span class="example-content"></span>
        </div>
        <div class="column">
            <span class="example-content"></span>
        </div>
        <div class="column">
            <span class="example-content"></span>
        </div>
    </div>
</div>

Example:

Example (2 columns):

Example (4 columns):

Explicit Responsive Column Widths

Set explicit widths for more control over column width at various breakpoints.

Naming conventions are as follows: {breakpoint}-{width}

Name	Width	in pixels
xs	0 - 36rem	0 - 576px
sm	> 36rem	> 576px
md	> 48rem	> 768px
lg	> 62rem	> 992px
xl	> 75rem	> 1200px

Supported Widths:

20%
25%
33%
40%
50%
60%
67%
75%
80%
100%

                    
<div class="container">
    <div class="row">
        <div class="column sm-50 lg-25">
            <span class="example-content"></span>
        </div>
        <div class="column sm-50 lg-25">
            <span class="example-content"></span>
        </div>
        <div class="column sm-50 lg-25">
            <span class="example-content"></span>
        </div>
        <div class="column sm-50 lg-25">
            <span class="example-content"></span>
        </div>
    </div>
</div>

Example: Grid with 4 columns on large screens, 2 columns on middle screens, and 1 on smallest

Container Fill

Remove spacing around containers and columns.

                    
<div class="container fill">
    <div class="row">
        <div class="column">
            <span class="example-content"></span>
        </div>
        <div class="column">
            <span class="example-content alt-color"></span>
        </div>
    </div>
</div>

Example (container):

Example (container-fluid):

Row Reverse

Reverse the order of columns in a row. Supports breakpoints.

                    
<div class="container">
    <div class="row sm-reverse">
        <div class="column">
            <span class="example-content"></span>
        </div>
        <div class="column">
            <span class="example-content alt-color"></span>
        </div>
    </div>
    <div class="row">
        <div class="column">
            <span class="example-content"></span>
        </div>
        <div class="column">
            <span class="example-content alt-color"></span>
        </div>
    </div>
</div>

Example: On smallest screens alt-color is second, but the order is reversed on the first row after the first breakpoint.

Justify Content

By default, the row justifies content to the left. But it's possible to center content or justify to the right.

                    
<div class="container">
    <div class="row justify-center">
        <div class="column sm-50">
            <span class="example-content"></span>
        </div>
    </div>
    <div class="row justify-right">
        <div class="column sm-50">
            <span class="example-content"></span>
        </div>
    </div>
</div>

Example: