Skip to main content Skip to navigation
View Navigation Comet

Grids

Basics

Flex grid rows use the class .comet-row__inner-flex, and columns use the class .comet-column (or .comet-columns). Sizing of columns is done using grid classes: .comet-column--small-6, .comet-column--medium-12, and so on.

6 columns
6 columns
12/6/4 columns
12/6/8 columns
Copy to Clipboard Press Ctrl + C to copy 
<div class='comet-row'>
    <div class='comet-row__inner-flex'>
        <div class='comet-columns comet-columns--small-6'>
            6 columns
        </div>
        <div class='comet-columns comet-columns--small-6'>
            6 columns
        </div>
    </div>
</div>
<div class='comet-row'>
    <div class='comet-row__inner-flex'>
        <div class='comet-columns comet-columns--medium-6 comet-columns--large-4'>
            12/6/4 columns
        </div>
        <div class='comet-columns comet-columns--medium-6 comet-columns--large-8'>
            12/6/8 columns
        </div>
    </div>
</div>
Copy to Clipboard Press Ctrl + C to copy 
{% call comet.grid_row() %}
                        {{ comet.grid_column(class='comet-columns--small-6', contents='6 columns') }}
                        {{ comet.grid_column(class='comet-columns--small-6', contents='6 columns') }}
                    {% endcall %}
                    {% call comet.grid_row() %}
                        {{ comet.grid_column(class='comet-columns--medium-6 comet-columns--large-4', contents='12/6/4 columns') }}
                        {{ comet.grid_column(class='comet-columns--medium-6 comet-columns--large-8', contents='12/6/8 columns') }}
                    {% endcall %}
                
Macro params reference

Advanced Sizing

If no sizing class is added to the column, it will simply expand to fill the leftover space. We call this an expand behavior.

4 columns
Whatever is left!
Copy to Clipboard Press Ctrl + C to copy 
<div class='comet-row'>
    <div class='comet-row__inner-flex'>
        <div class='comet-columns comet-columns--small-4'>
            4 columns
        </div>
        <div class='comet-columns'>
            Whatever is left!
        </div>
    </div>
</div>
Copy to Clipboard Press Ctrl + C to copy 
{% call comet.grid_row() %}
                        {{ comet.grid_column(class='comet-columns--small-4', contents='4 columns') }}
                        {{ comet.grid_column(contents='Whatever is left!') }}
                    {% endcall %}
                
Macro params reference

Multiple expanding columns will share the leftover space equally.

4 columns
Whatever is left!
Whatever is left!
Copy to Clipboard Press Ctrl + C to copy 
<div class='comet-row'>
    <div class='comet-row__inner-flex'>
        <div class='comet-columns comet-columns--small-4'>
            4 columns
        </div>
        <div class='comet-columns'>
            Whatever is left!
        </div>
        <div class='comet-columns'>
            Whatever is left!
        </div>
    </div>
</div>
Copy to Clipboard Press Ctrl + C to copy 
{% call comet.grid_row() %}
                        {{ comet.grid_column(class='comet-columns--small-4', contents='4 columns') }}
                        {{ comet.grid_column(contents='Whatever is left!') }}
                        {{ comet.grid_column(contents='Whatever is left!') }}
                    {% endcall %}
                
Macro params reference

A column can also be made to shrink, by adding the .comet-columns--shrink class. This means it will only take up the horizontal space its contents need.

Shrink!
Expand!
Copy to Clipboard Press Ctrl + C to copy 
<div class='comet-row'>
    <div class='comet-row__inner-flex'>
        <div class='comet-columns comet-columns--shrink'>
            Shrink!
        </div>
        <div class='comet-columns'>
            Expand!
        </div>
    </div>
</div>
Copy to Clipboard Press Ctrl + C to copy 
{% call comet.grid_row() %}
                        {{ comet.grid_column(class='comet-columns--shrink', contents='Shrink!') }}
                        {{ comet.grid_column(contents='Expand!') }}
                    {% endcall %}
                
Macro params reference

Responsive Adjustments

Columns in a flex grid will not wrap if not given an explicit size—this is what allows the magical auto-sizing to work. To make columns stack on smaller screens, add the class .comet-columns--small-12 manually.

To switch back to the expand behavior from a percentage or shrink behavior, use the classes .comet-columns--medium-expand or .comet-columns--large-expand. In the below example, the columns stack on small screens, and become even-width on large screens.

One
Two
Three
Four
Five
Six
Copy to Clipboard Press Ctrl + C to copy 
<div class='comet-row'>
    <div class='comet-row__inner-flex'>
        <div class='comet-columns comet-columns--small-12 comet-columns--large-expand'>
            One
        </div>
        <div class='comet-columns comet-columns--small-12 comet-columns--large-expand'>
            Two
        </div>
        <div class='comet-columns comet-columns--small-12 comet-columns--large-expand'>
            Three
        </div>
        <div class='comet-columns comet-columns--small-12 comet-columns--large-expand'>
            Four
        </div>
        <div class='comet-columns comet-columns--small-12 comet-columns--large-expand'>
            Five
        </div>
        <div class='comet-columns comet-columns--small-12 comet-columns--large-expand'>
            Six
        </div>
    </div>
</div>
Copy to Clipboard Press Ctrl + C to copy 
{% call comet.grid_row() %}
                        {{ comet.grid_column(class='comet-columns--small-12 comet-columns--large-expand', contents='One') }}
                        {{ comet.grid_column(class='comet-columns--small-12 comet-columns--large-expand', contents='Two') }}
                        {{ comet.grid_column(class='comet-columns--small-12 comet-columns--large-expand', contents='Three') }}
                        {{ comet.grid_column(class='comet-columns--small-12 comet-columns--large-expand', contents='Four') }}
                        {{ comet.grid_column(class='comet-columns--small-12 comet-columns--large-expand', contents='Five') }}
                        {{ comet.grid_column(class='comet-columns--small-12 comet-columns--large-expand', contents='Six') }}
                    {% endcall %}
                
Macro params reference

Automatic Stacking

We have a few shorthand classes for the above behavior. Use a .comet-row__inner-flex--[size]-unstack class on the row to stack all columns in the row by default, and then unstack them on a larger screen size, making each one equal-width.

One
Two
Three
Four
Five
Six
Copy to Clipboard Press Ctrl + C to copy 
<div class='comet-row'>
    <div class='comet-row__inner-flex comet-row__inner-flex--medium-unstack'>
        <div class='comet-columns'>
            One
        </div>
        <div class='comet-columns'>
            Two
        </div>
        <div class='comet-columns'>
            Three
        </div>
        <div class='comet-columns'>
            Four
        </div>
        <div class='comet-columns'>
            Five
        </div>
        <div class='comet-columns'>
            Six
        </div>
    </div>
</div>
Copy to Clipboard Press Ctrl + C to copy 
{% call comet.grid_row(row_inner_class='comet-row__inner-flex--medium-unstack') %}
                        {{ comet.grid_column(contents='One') }}
                        {{ comet.grid_column(contents='Two') }}
                        {{ comet.grid_column(contents='Three') }}
                        {{ comet.grid_column(contents='Four') }}
                        {{ comet.grid_column(contents='Five') }}
                        {{ comet.grid_column(contents='Six') }}
                    {% endcall %}
                
Macro params reference

Column Alignment

Columns in a flex grid can be aligned across the horizontal or vertical axis of their parent row.

###Horizontal Alignment### Columns can be aligned the same way you would align text in a paragraph. By default, all columns align to the left (or the right in RTL), but this can be overridden with by adding the .comet-row__inner-flex--align-[dir] class to the flex row.

Aligned to
the left
Aligned to
the right
Aligned to
the middle
Aligned to
the edges
Aligned to
the space around
Copy to Clipboard Press Ctrl + C to copy 
<div class='comet-row'>
    <div class='comet-row__inner-flex'>
        <div class='comet-columns comet-columns--small-4'>
            Aligned to
        </div>
        <div class='comet-columns comet-columns--small-4'>
            the left
        </div>
    </div>
</div>
<div class='comet-row'>
    <div class='comet-row__inner-flex comet-row__inner-flex--align-right'>
        <div class='comet-columns comet-columns--small-4'>
            Aligned to
        </div>
        <div class='comet-columns comet-columns--small-4'>
            the right
        </div>
    </div>
</div>
<div class='comet-row'>
    <div class='comet-row__inner-flex comet-row__inner-flex--align-center'>
        <div class='comet-columns comet-columns--small-4'>
            Aligned to
        </div>
        <div class='comet-columns comet-columns--small-4'>
            the middle
        </div>
    </div>
</div>
<div class='comet-row'>
    <div class='comet-row__inner-flex comet-row__inner-flex--align-justify'>
        <div class='comet-columns comet-columns--small-4'>
            Aligned to
        </div>
        <div class='comet-columns comet-columns--small-4'>
            the edges
        </div>
    </div>
</div>
<div class='comet-row'>
    <div class='comet-row__inner-flex comet-row__inner-flex--align-spaced'>
        <div class='comet-columns comet-columns--small-4'>
            Aligned to
        </div>
        <div class='comet-columns comet-columns--small-4'>
            the space around
        </div>
    </div>
</div>
Copy to Clipboard Press Ctrl + C to copy 
{% call comet.grid_row() %}
                         {{ comet.grid_column(class='comet-columns--small-4', contents='Aligned to') }}
                         {{ comet.grid_column(class='comet-columns--small-4', contents='the left') }}
                     {% endcall %}
                     {% call comet.grid_row(row_inner_class='comet-row__inner-flex--align-right') %}
                         {{ comet.grid_column(class='comet-columns--small-4', contents='Aligned to') }}
                         {{ comet.grid_column(class='comet-columns--small-4', contents='the right') }}
                     {% endcall %}
                     {% call comet.grid_row(row_inner_class='comet-row__inner-flex--align-center') %}
                         {{ comet.grid_column(class='comet-columns--small-4', contents='Aligned to') }}
                         {{ comet.grid_column(class='comet-columns--small-4', contents='the middle') }}
                     {% endcall %}
                     {% call comet.grid_row(row_inner_class='comet-row__inner-flex--align-justify') %}
                         {{ comet.grid_column(class='comet-columns--small-4', contents='Aligned to') }}
                         {{ comet.grid_column(class='comet-columns--small-4', contents='the edges') }}
                     {% endcall %}
                     {% call comet.grid_row(row_inner_class='comet-row__inner-flex--align-spaced') %}
                         {{ comet.grid_column(class='comet-columns--small-4', contents='Aligned to') }}
                         {{ comet.grid_column(class='comet-columns--small-4', contents='the space around') }}
                     {% endcall %}
                
Macro params reference

You might be wondering what the difference between .comet-row__inner-flex--align-justify and .comet-row__inner-flex--align-spaced is. A justified grid (justify-content: space-between) evenly distributes the space between each column. The first and last columns pin to the edge of the grid. A spaced grid (justify-content: space-around) evenly distributes the space around each column. This means there will always be space to the left of the first column, and to the right of the last column.

The horizontal alignment classes are shorthands for the justify-content CSS property.

Vertical Alignment

By default, all columns in a flex grid stretch to be equal height. This behavior can be changed with another set of alignment classes. That's right, middle alignment in CSS! Your options for vertical alignment are top, middle, bottom, and stretch. Note that we use the word middle for vertical alignment, and center for horizontal alignment. Applying a vertical alignment class to the flex row will affect every column directly inside it.

I am in the middle!
I am as well, but I have so much text I take up more space! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis facere ducimus earum minus, inventore, ratione doloremque deserunt neque perspiciatis accusamus explicabo soluta, quod provident distinctio aliquam omnis? Labore, ullam possimus.
Copy to Clipboard Press Ctrl + C to copy 
<div class='comet-row'>
    <div class='comet-row__inner-flex comet-row__inner-flex--align-middle'>
        <div class='comet-columns'>
            I am in the middle!
        </div>
        <div class='comet-columns'>
            I am as well, but I have so much text I take up more space! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis facere ducimus earum minus, inventore, ratione doloremque deserunt neque perspiciatis accusamus explicabo soluta, quod provident distinctio aliquam omnis? Labore, ullam possimus.
        </div>
    </div>
</div>
Copy to Clipboard Press Ctrl + C to copy 
{% call comet.grid_row(row_inner_class='comet-row__inner-flex--align-middle') %}
                         {{ comet.grid_column(contents='I am in the middle!') }}
                         {{ comet.grid_column(contents='I am as well, but I have so much text I take up more space! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis facere ducimus earum minus, inventore, ratione doloremque deserunt neque perspiciatis accusamus explicabo soluta, quod provident distinctio aliquam omnis? Labore, ullam possimus.') }}
                     {% endcall %}
                
Macro params reference
These columns align to the top.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, tempora. Impedit eius officia possimus laudantium? Molestiae eaque, sapiente atque doloremque placeat! In sint, fugiat saepe sunt dolore tempore amet cupiditate.
Copy to Clipboard Press Ctrl + C to copy 
<div class='comet-row'>
    <div class='comet-row__inner-flex comet-row__inner-flex--align-top'>
        <div class='comet-columns'>
            These columns align to the top.
        </div>
        <div class='comet-columns'>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, tempora. Impedit eius officia possimus laudantium? Molestiae eaque, sapiente atque doloremque placeat! In sint, fugiat saepe sunt dolore tempore amet cupiditate.
        </div>
    </div>
</div>
Copy to Clipboard Press Ctrl + C to copy 
{% call comet.grid_row(row_inner_class='comet-row__inner-flex--align-top') %}
                         {{ comet.grid_column(contents='These columns align to the top.') }}
                         {{ comet.grid_column(contents='Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, tempora. Impedit eius officia possimus laudantium? Molestiae eaque, sapiente atque doloremque placeat! In sint, fugiat saepe sunt dolore tempore amet cupiditate.') }}
                     {% endcall %}
                
Macro params reference
Align bottom
Align middle
Align top
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non harum laborum cum voluptate vel, eius adipisci similique dignissimos nobis at excepturi incidunt fugit molestiae quaerat, consequuntur porro temporibus. Nisi, ex?
Copy to Clipboard Press Ctrl + C to copy 
<div class='comet-row'>
    <div class='comet-row__inner-flex comet-row__inner-flex--align-top'>
        <div class='comet-columns comet-columns--align-self-bottom'>
            Align bottom
        </div>
        <div class='comet-columns comet-columns--align-self-middle'>
            Align middle
        </div>
        <div class='comet-columns comet-columns--align-self-top'>
            Align top
        </div>
        <div class='comet-columns'>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non harum laborum cum voluptate vel, eius adipisci similique dignissimos nobis at excepturi incidunt fugit molestiae quaerat, consequuntur porro temporibus. Nisi, ex?
        </div>
    </div>
</div>
Copy to Clipboard Press Ctrl + C to copy 
{% call comet.grid_row(row_inner_class='comet-row__inner-flex--align-top') %}
                         {{ comet.grid_column(class='comet-columns--align-self-bottom', contents='Align bottom') }}
                         {{ comet.grid_column(class='comet-columns--align-self-middle', contents='Align middle') }}
                         {{ comet.grid_column(class='comet-columns--align-self-top', contents='Align top') }}
                         {{ comet.grid_column(contents='Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non harum laborum cum voluptate vel, eius adipisci similique dignissimos nobis at excepturi incidunt fugit molestiae quaerat, consequuntur porro temporibus. Nisi, ex?') }}
                     {% endcall %}
                
Macro params reference

Collapse/Uncollapse Rows

The .comet-row__inner-flex--collapse class lets you remove column gutters (padding) within a row. There are times when you won't want each media query to be collapsed or uncollapsed. In this case, use the media query size you want and collapse or uncollapse and add that to your row element. Example shows no gutter at small media size and then adds the gutter to columns at medium.

Removes gutter at large media query
Removes gutter at large media query
Copy to Clipboard Press Ctrl + C to copy 
<div class='comet-row'>
    <div class='comet-row__inner-flex comet-row__inner-flex--medium-uncollapse comet-row__inner-flex--large-collapse'>
        <div class='comet-columns comet-columns--small-6'>
            Removes gutter at large media query
        </div>
        <div class='comet-columns comet-columns--small-6'>
            Removes gutter at large media query
        </div>
    </div>
</div>
Copy to Clipboard Press Ctrl + C to copy 
{% call comet.grid_row(row_inner_class='comet-row__inner-flex--medium-uncollapse comet-row__inner-flex--large-collapse') %}
                         {{ comet.grid_column(class='comet-columns--small-6', contents='Removes gutter at large media query') }}
                         {{ comet.grid_column(class='comet-columns--small-6', contents='Removes gutter at large media query') }}
                     {% endcall %}
                
Macro params reference

Offsets

Offsets work identically to the float grid, by applying margin-left to a column.

Offset 2 on large
4 columns
Copy to Clipboard Press Ctrl + C to copy 
<div class='comet-row'>
    <div class='comet-row__inner-flex'>
        <div class='comet-columns comet-columns--small-4 comet-columns--large-offset-2 '>
            Offset 2 on large
        </div>
        <div class='comet-columns comet-columns--small-4 '>
            4 columns
        </div>
    </div>
</div>
Copy to Clipboard Press Ctrl + C to copy 
{% call comet.grid_row() %}
                         {{ comet.grid_column(class='comet-columns--small-4 comet-columns--large-offset-2 ', contents='Offset 2 on large') }}
                         {{ comet.grid_column(class='comet-columns--small-4 ', contents='4 columns') }}
                     {% endcall %}
                
Macro params reference

Source Ordering

Columns within a row will be sorted by their order property. Lower numbers are placed first. If multiple columns have the same number, they're sorted in the order they appear in the HTML. We have a set of classes that make it easy to setup source ordering in your HTML. They also come in responsive flavors, allowing you to reorder a grid on different screen sizes.

This column will come second on small, and first on medium and larger.
This column will come first on small, and second on medium and larger.
Copy to Clipboard Press Ctrl + C to copy 
<div class='comet-row'>
    <div class='comet-row__inner-flex'>
        <div class='comet-columns comet-columns--small-order-2 comet-columns--medium-order-1 '>
            This column will come second on small, and first on medium and larger.
        </div>
        <div class='comet-columns comet-columns--small-order-1 comet-columns--medium-order-2 '>
            This column will come first on small, and second on medium and larger.
        </div>
    </div>
</div>
Copy to Clipboard Press Ctrl + C to copy 
{% call comet.grid_row() %}
                         {{ comet.grid_column(class='comet-columns--small-order-2 comet-columns--medium-order-1 ', contents='This column will come second on small, and first on medium and larger.') }}
                         {{ comet.grid_column(class='comet-columns--small-order-1 comet-columns--medium-order-2 ', contents='This column will come first on small, and second on medium and larger.') }}
                     {% endcall %}
                
Macro params reference

Nesting

Example of nested rows and columns.

Outer column
Nested column
Nested column
Nested column
Outer column
Nested column
Nested column
Nested column
Copy to Clipboard Press Ctrl + C to copy 
<div class='comet-row'>
    <div class='comet-row__inner-flex'>
        <div class='comet-columns comet-columns--small-6'>
            Outer column
            <div class='comet-row'>
                <div class='comet-row__inner-flex'>
                    <div class='comet-columns comet-columns--small-4'>
                        Nested column
                    </div>
                    <div class='comet-columns comet-columns--small-4'>
                        Nested column
                    </div>
                    <div class='comet-columns comet-columns--small-4'>
                        Nested column
                    </div>
                </div>
            </div>
        </div>
        <div class='comet-columns comet-columns--small-6'>
            Outer column
            <div class='comet-row'>
                <div class='comet-row__inner-flex'>
                    <div class='comet-columns comet-columns--small-4'>
                        Nested column
                    </div>
                    <div class='comet-columns comet-columns--small-4'>
                        Nested column
                    </div>
                    <div class='comet-columns comet-columns--small-4'>
                        Nested column
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
Copy to Clipboard Press Ctrl + C to copy 
{% call comet.grid_row() %}
                         {% call comet.grid_column(class='comet-columns--small-6') %}
                             Outer column
                             {% call comet.grid_row() %}
                                 {{ comet.grid_column(class='comet-columns--small-4', contents='Nested column') }}
                                 {{ comet.grid_column(class='comet-columns--small-4', contents='Nested column') }}
                                 {{ comet.grid_column(class='comet-columns--small-4', contents='Nested column') }}
                             {% endcall %}
                         {% endcall %}
                         {% call comet.grid_column(class='comet-columns--small-6') %}
                             Outer column
                             {% call comet.grid_row() %}
                                 {{ comet.grid_column(class='comet-columns--small-4', contents='Nested column') }}
                                 {{ comet.grid_column(class='comet-columns--small-4', contents='Nested column') }}
                                 {{ comet.grid_column(class='comet-columns--small-4', contents='Nested column') }}
                             {% endcall %}
                         {% endcall %}
                     {% endcall %}
                
Macro params reference

Copyright © 2018 Discovery Education. All rights reserved. Discovery Education is a subsidiary of Discovery Communications, LLC.

Jump to page content
Navigation Menu

Comet

v2.44.1