Skip to content
Indiana University Logo
Rivet Design System
  • Components Add-ons Content guide
  • What is Rivet? Blog Roadmap Changelog
  1. February 25, 2021

    Rivet 1.8.0 release

    Rivet 1.8.0 is now available. This release adds border removal utility classes and fixes bugs related to the button, dropdown, and collapsible components.

  2. February 15, 2021

    Rivet announcements: Beta timeline, GitHub Discussions, and 1.8.0 release

    Updates about Rivet's development in the spring and beyond.

  3. January 20, 2021

    Rivet featured on Accessible Code Libraries and Design Patterns list

    Rivet was highlighted alongside the U.S. government, GOV.UK, and Salesforce design systems.

More posts Get updates in your inbox
Install via NPM Download CSS & JS Hosted assets
Navigation
    • Components
    • Add-ons
    • Content guide
    • What is Rivet?
    • Blog
    • Roadmap
    • Changelog
  • Use Rivet
Resources
  • User Experience Office
  • Accessibility Evaluations
  • Rivet Software Design System
  • IU Framework for WCMS
Version 1.8.0
  • Information
    • Roadmap
    • Changelog
    • Component status
    • Contributing
  • Getting started
    • Install with NPM
    • Rivet Sass
  • Layout
    • Box
    • Grid
    • Panels
    • Spacing
    • Typography
  • Page content
    • Badges
    • Links
    • Lists
    • Media Object
    • Step Indicator
    • Tables
    • Tabs This component requires JS
    • Timeline
  • Forms
    • Buttons
    • Segmented Buttons
    • Checkboxes
    • File input This component requires JS
    • Input group
    • Radio buttons
    • Select element
    • Text inputs
  • Navigation
    • Breadcrumb
    • Dropdown This component requires JS
    • Footer
    • Header This component requires JS
    • Menu
    • Pagination
  • Overlays & Feedback
    • Alerts This component requires JS
    • Loading indicator
    • Modals This component requires JS
  • Utilities
    • Border
    • Display
    • Flex
    • Text
    • Visibility
    • Width
    • z-index
Ready Added in 1.0.0

Grid

A 12 column responsive grid with support for automatic columns that makes it easy to lay out your application.

About the grid

The Rivet grid is a mobile-first grid system built with flexbox. It is based on five screen sizes and uses CSS classes to specify how many columns the grid should have at each of the breakpoints listed in the following documentation.

Grid breakpoints

See the Setting column widths section for instructions on how to apply column widths at the different breakpoint sizes.

Rivet breakpoints
Sass variable Viewport width (px) Viewport width (rem)
$breakpoint-sm 480px 3rem
$breakpoint-md 740px 46.25rem
$breakpoint-lg 1080px 67.5rem
$breakpoint-xl 1260px 78.75rem
$breakpoint-xxl 1400px 87.5rem
Grid and spacing utilities

Please note that using any horizontal (rvt-m-left-*, rvt-p-left-*, rvt-m-right-*, and rvt-p-right-*) spacing utilities on the .rvt-grid__item-*s will throw off the grid gutters and maybe break your layout.

The container

The .rvt-container is the basic layout unit in Rivet. A basic .rvt-container element is fluid by default. It will take up the full width of the viewport with a default of 1.5rem of padding on the left and right sides.

The container is meant to be a generic wrapper to add enough padding to the content of your application so that it doesn’t bump up against the sides of the viewport. The container can be used as is without any other grid items inside, but it is required to wrap all other grid elements.

Grid item
<div class="rvt-container">
    <div class="rvt-grid">
        <div class="rvt-grid__item">
            <span>Grid item</span>
        </div>
    </div>
</div>

Container sizes

If you need to constrain the .rvt-container to a fixed size there are four modifier classes that will set a max-width on the container.

They are:

  • .rvt-container--freshman = 640px
  • .rvt-container--sophomore = 1024px
  • .rvt-container--junior = 1140px
  • .rvt-container--senior = 1380px
.rvt-container--freshman
.rvt-container--sophomore
.rvt-container--junior
.rvt-container--senior
<div class="rvt-container rvt-container--freshman">
    <div class="rvt-grid">
        <div class="rvt-grid__item"><span><code>.rvt-container--freshman</code></span></div>
    </div>
</div>
<div class="rvt-container rvt-container--sophomore">
    <div class="rvt-grid">
        <div class="rvt-grid__item"><span><code>.rvt-container--sophomore</code></span></div>
    </div>
</div>
<div class="rvt-container rvt-container--junior">
    <div class="rvt-grid">
        <div class="rvt-grid__item"><span><code>.rvt-container--junior</code></span></div>
    </div>
</div>
<div class="rvt-container rvt-container--senior">
    <div class="rvt-grid">
        <div class="rvt-grid__item"><span><code>.rvt-container--senior</code></span></div>
    </div>
</div>

Centering a container

To center a container that was given a max-width using the modifier classes above, you can add the modifier class .rvt-container--center.

.rvt-container--center
<div class="rvt-container rvt-container--freshman rvt-container--center">
    <div class="rvt-grid">
        <div class="rvt-grid__item">
            <span>.rvt-container--center</span>
        </div>
    </div>
</div>

Automatic columns

The rivet grid uses the power of flexbox to evenly distribute children marked up with the CSS class .rvt-grid__item inside of a parent .rvt-grid container. So a .rvt-grid parent with four .rvt-grid__item elements creates four columns with equal widths. See the example below.

Grid item
Grid item
Grid item
Grid item
<div class="rvt-container">
    <div class="rvt-grid">
        <div class="rvt-grid__item">
            <span>Grid item</span>
        </div>
        <div class="rvt-grid__item">
            <span>Grid item</span>
        </div>
        <div class="rvt-grid__item">
            <span>Grid item</span>
        </div>
        <div class="rvt-grid__item">
            <span>Grid item</span>
        </div>
    </div>
</div>

Responsive automatic columns

Automatic columns will be distributed equally across all screen sizes by default. You can use additional responsive auto grid CSS classes to specify the screen size at which you would like your grid to become an auto grid.

In the example below, we’ve used the -lg suffix on the .rvt-grid__item CSS class. This will make a grid that starts out collapsed into a single column on all screens up to large screens (1080px wide), at which point it will become an auto grid and each .rvt-grid__item-lg will become an evenly distributed column.

This convention will work for any of Rivet’s named breakpoints: -sm, -md, -lg, -xl, -xxl. The example below will start out stacked on small screens and become a grid of five equal-width columns at large screens (1080px) and wider.

Auto grid item
Auto grid item
Auto grid item
Auto grid item
Auto grid item
<div class="rvt-container">
    <div class="rvt-grid">
        <div class="rvt-grid__item-lg">
            <span>Auto grid item</span>
        </div>
        <div class="rvt-grid__item-lg">
            <span>Auto grid item</span>
        </div>
        <div class="rvt-grid__item-lg">
            <span>Auto grid item</span>
        </div>
        <div class="rvt-grid__item-lg">
            <span>Auto grid item</span>
        </div>
        <div class="rvt-grid__item-lg">
            <span>Auto grid item</span>
        </div>
    </div>
</div>

Setting column widths

You can set a specific number of columns you want grid items to span by including the number of columns in the responsive grid class. For example, adding the class .rvt-grid__item-6-md-up would make a grid item span six columns at medium screens (740px) and larger.

When you explicitly set column widths, remember that the total number of columns should always equal 12.

4 columns medium and up
4 columns medium and up
4 columns medium and up
<div class="rvt-container rvt-container--junior rvt-container--center">
    <div class="rvt-grid">
        <div class="rvt-grid__item-4-md-up">
            <span>4 columns medium and up</span>
        </div>
        <div class="rvt-grid__item-4-md-up">
            <span>4 columns medium and up</span>
        </div>
        <div class="rvt-grid__item-4-md-up">
            <span>4 columns medium and up</span>
        </div>
    </div>
</div>

Mixing column widths with auto columns

It’s also possible to mix and match specified columns with .rvt-grid__item auto columns. The grid items with specified columns will span the specified amount of columns and any auto grid items will fill the remaining space.

It’s important to note that the auto grid items will stack at whichever grid breakpoint you specify on the non-auto grid item(s). In the example below we are using .rvt-grid__item-6-md-up to set a width of six columns on medium screens and larger, so the auto grid items will inherit the same behavior.

.rvt-grid__item
.rvt-grid__item-6-md-up
.rvt-grid__item
<div class="rvt-container">
    <div class="rvt-grid">
        <div class="rvt-grid__item">
            <span><code>.rvt-grid__item</code></span>
        </div>
        <div class="rvt-grid__item-6-md-up">
            <span><code>.rvt-grid__item-6-md-up</code></span>
        </div>
        <div class="rvt-grid__item">
            <span><code>.rvt-grid__item</code></span>
        </div>
    </div>
</div>

Push and pull

When you need to change the visual order of the grid items, you can use .rvt-grid__item-push-* and .rvt-grid__item-pull-* modifiers.

I'm first in the source order
I'm second in the source order
<div class="rvt-container">
    <div class="rvt-grid">
        <div class="rvt-grid__item-4-md-up rvt-grid__item-push-8-md">
            <span>I'm first in the source order</span>
        </div>
        <div class="rvt-grid__item-8-md-up rvt-grid__item-pull-4-md">
            <span>I'm second in the source order</span>
        </div>
    </div>
</div>

Right-align last item

You can right-align the last item in a .rvt-grid by adding the .rvt-grid__item--last modifier to any grid item. This can be helpful when using set column widths that add up to less than 12 columns. Using the .rvt-grid__item--last will push the last .rvt-grid__item-* to the right, leaving the remaining columns as extra space.

Four
Seven with one left over
<div class="rvt-container">
    <div class="rvt-grid">
        <div class="rvt-grid__item-4-sm-up">
            <span>Four</span>
        </div>
        <div class="rvt-grid__item-7-sm-up rvt-grid__item--last">
            <span>Seven with one left over</span>
        </div>
    </div>
</div>

Nesting

You can nest new .rvt-grid blocks inside of .rvt-grid__item-* elements if you need more control over your layout.

Level one
Level Two
Level Two
Level one
<div class="rvt-container">
    <div class="rvt-grid">
        <div class="rvt-grid__item-7-md-up rvt-grid__item-9-lg-up">
            <div style="background-color: #dce3ee; padding: .75rem;">
                Level one
                <div class="rvt-grid">
                    <div class="rvt-grid__item-7-md-up rvt-grid__item-9-lg-up">
                        <div style="background-color: #006298; color: #fff;">
                            Level Two
                        </div>
                    </div>
                    <div class="rvt-grid__item-5-md-up rvt-grid__item-3-lg-up">
                        <div style="background-color: #006298; color: #fff;">Level Two</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="rvt-grid__item-5-md-up rvt-grid__item-3-lg-up">
            <div style="background-color: #dce3ee; padding: .75rem;">
                Level one
            </div>
        </div>
    </div>
</div>

On this page

    • About the grid
      • Grid breakpoints
    • The container
      • Container sizes
      • Centering a container
    • Automatic columns
      • Responsive automatic columns
    • Setting column widths
      • Mixing column widths with auto columns
    • Push and pull
      • Right-align last item
    • Nesting
Have a question about Rivet?

We're happy to help! If you've found a bug, typo, or have a request, the best way to get in touch is to create an issue on Github.

For all other questions please feel free to email us at rivet@iu.edu

  • Accessibility
  • Privacy Notice
  • Copyright © The Trustees of Indiana University