Chassis.css

v4.0.8

Grid system

The chassis.css grid system uses a powerful, mobile-first, and flexbox-based 12-column layout. With no breakpoints to memorize and simple adjustment classes, it's very easy to get started.

The basics

There’s a few things to keep in mind when using the chassis.css grid system.

  • Rows are meant to be inside a .container.
  • Columns are meant to be inside a .row.
  • Column widths can add up to 12 within a row.
  • Columns will become 100% width and vertically stacked when the viewport is less than 768px wide.

Fixed width columns

Columns with fixed widths always follow the .col-* class structure, where * can be any number between 1 and 12. Let’s see this in action below:

<div class="container">
    <div class="row">
        <div class="col-4">.col-4</div>
        <div class="col-4">.col-4</div>
        <div class="col-4">.col-4</div>
    </div>
</div>

In the above example, we have three columns each taking up 4 of the available 12 column width; 3 x 4 = 12.

Auto width columns

Columns don’t require a fixed width, however. Auto width columns use the .col class, and will take up the remainder of horizontal space when next to set-width columns. A row of all auto width columns will divide the horizontal space up evenly. Let’s redo the first example with auto-width columns:

<div class="container">
    <div class="row">
        <div class="col">.col</div>
        <div class="col">.col</div>
        <div class="col">.col</div>
    </div>
</div>

In the above example, we have three auto width columns sharing the horizontal space evenly, rendering an identical result to the first example; 12 / 3 = 4, so the auto width columns will automatically take up 4 of the available 12 column width. As stated before, auto width columns can be paired with fixed width columns, taking up the remaining horizontal space:

<div class="container">
    <div class="row">
        <div class="col-3">.col-3</div>
        <div class="col">.col</div>
    </div>
</div>

In the above example, we have a fixed width column taking up 3 of the available 12 column width, and an auto width column taking up the remaining horizontal space; 12 - 3 = 9, so the auto width column will take up 9 of the available 12 column width.

Row nesting

Rows of columns can be can be nested within other rows without affecting the left or right alignment of the content inside:

<div class="container">
    <div class="row">
        <div class="col">.col
            <div class="row">
                <div class="col-6">.col-6
                    <div class="row">
                        <div class="col-4">.col-4</div>
                        <div class="col-4">.col-4</div>
                        <div class="col-4">.col-4</div>
                    </div>
                </div>
                <div class="col-6">.col-6
                    <div class="row">
                        <div class="col-12">.col-12</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

In the above example, we have nested 3 layers of rows under various arrangements or columns without affecting the left or right alignment of the text inside.

Column alignment

Columns can be vertically and horizontally aligned however you like. This can be done by adding modifier classes to the row itself, globally aligning the columns within it, or in some instances to individual columns, aligning the column independently of the rest.

Vertical column alignment

First, let’s see how we can vertically align all columns within a row:

<div class="container">
    <div class="row ai-c ac-c" style="height: 200px;">
        <div class="col-4">.col-4</div>
        <div class="col-4">.col-4</div>
        <div class="col-4">.col-4</div>
    </div>
</div>

In the above example, we are aligning the columns in the center of a row that has been manually set to 200px tall using one of the "align items“ modifier classes and one of the ”align content" modifier classes. This is added to the row and follows the .ai-* (align items) and .ac-* (align content) class structure, where * can be one of the following letters:

  • s means “start” and aligns columns to the top of the row.
  • c means “center” and aligns columns to the vertical-middle of the row.
  • e means “end” and aligns columns to the bottom of the row.

There’s also the “align self” modifier classes. These are added to a column, independently affecting its vertical alignment, and follow the .as-* class structure, where * can be one of the letters in the list above.

<div class="container">
    <div class="row" style="height: 200px;">
        <div class="col-4 as-s">.col-4.as-s</div>
        <div class="col-4 as-c">.col-4.as-c</div>
        <div class="col-4 as-e">.col-4.as-e</div>
    </div>
</div>

In the above example, the first column is aligned to the top of the row, the second column is aligned to the middle of the row, and the third column is aligned to the bottom of the row.

Horizontal column alignment

Columns can also be vertically aligned using the “justify content” modifier classes. These are added to the row and follow the .jc-* class structure, where * is one of the following letters:

  • s means “start” and aligns columns to the left of the row.
  • c means “center” and aligns columns to the horizontal-middle of the row.
  • e means “end” and aligns columns to the right of the row.
  • a means “space around” and aligns columns with an even amount of horizontal space around them.
  • b means “space between” and aligns columns with an even amount of horizontal space between them.

Let’s check it out:

<div class="container">
    <div class="row jc-s">
        <div class="col-1">.col-1</div>
        <div class="col-1">.col-1</div>
        <div class="col-1">.col-1</div>
    </div>
    <div class="row jc-c">
        <div class="col-1">.col-1</div>
        <div class="col-1">.col-1</div>
        <div class="col-1">.col-1</div>
    </div>
    <div class="row jc-e">
        <div class="col-1">.col-1</div>
        <div class="col-1">.col-1</div>
        <div class="col-1">.col-1</div>
    </div>
    <div class="row jc-a">
        <div class="col-1">.col-1</div>
        <div class="col-1">.col-1</div>
        <div class="col-1">.col-1</div>
    </div>
    <div class="row jc-b">
        <div class="col-1">.col-1</div>
        <div class="col-1">.col-1</div>
        <div class="col-1">.col-1</div>
    </div>
</div>

In the above example, each row has one of the possible "justify content" modifier classes on it.

Column offsets

Columns can be offset from the start of a row or from a column to the left of itself using the “offset” modifier classes. These are added to a column and follow the .os-* class structure, where * is one of the following:

  • a means “auto” and puts as much space as possible to the left of the column.
  • Any number between 1 and 12 corresponding to a column width.

When the viewport is less than 768px wide, these offsets will be removed. Let’s see this in action:

<div class="container">
    <div class="row">
        <div class="col-4">.col-4</div>
        <div class="col-4 os-a">.col-4.os-a</div>
    </div>
    <div class="row">
        <div class="col-2">.col-2</div>
        <div class="col-2 os-3">.col-2.os-3</div>
        <div class="col-2 os-3">.col-2.os-3</div>
    </div>
</div>

In the above example, the first row has two columns each taking up 4 of the available 12 column width with the second column automatically offsetting it from the first; 12 - (4 + 4) = 4, so the offset is automatically taking up 4 of the available 12 column width. The second row has 3 columns each taking up 2 of the available 12 column width with the second and third offsetting itself from the previous by 3 of the available 12 column width; 2 + 3 + 2 + 3 + 2 = 12.

Column order

Columns can be ordered relatively from one another independently of the order they are placed in the row using the “order” modifier classes. These are added to a column and follow one of the following class structures where * is any number 1 and 12:

  • .or-* changes the order of a column on all size viewports.
  • .or-r* changes the order of a column but resets the order when the viewport is less than 768px wide. This is similar behavior to the previous “push/pull” modifier classes in previous versions of this framework.
<div class="container">
    <div class="row">
        <div class="col-4 or-3">.col-4.or-3</div>
        <div class="col-4 or-2">.col-4.or-2</div>
        <div class="col-4 or-1">.col-4.or-1</div>
    </div>
    <div class="row">
        <div class="col-4 or-r3">.col-4.or-r3</div>
        <div class="col-4 or-r2">.col-4.or-r2</div>
        <div class="col-4 or-r1">.col-4.or-r1</div>
    </div>
</div>

In the above example, the first row has columns that are rendered in reverse order despite the order they were placed. The second row is doing the same as the first row, except this reordering will be reset when the viewport is less than 768px wide.

Row reversing

The first row from the above example can also be accomplished using the “reverse” modifier class. This is added to a row and uses the .rev class. This will not be reset when the viewport is less than 768px wide.

<div class="container">
    <div class="row rev">
        <div class="col-2">.col-2</div>
        <div class="col-3">.col-3</div>
        <div class="col-7">.col-7</div>
    </div>
</div>

In the above example, the row has columns that are rendered in reverse order despite the order they were placed.