Grid

Use the simple Rocket CSS grid to quickly build applications.

Basics#

Getting started with the Rocket CSS grid is easy. Follow these simple steps:

  • 1. Add a .row wrapper.
  • 2. Add a .col column.

Each column will have an equal size regardless of the number of columns.

.col
.col
.col
.col 

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

Sizes#

You can change the size of a column by adding one of these classes to a .col column

  • - .col-is-one-quarter
  • - .col-is-half
  • - .col-is-three-quarters
.col-is-three-quarters
Auto
Auto
.col-is-half
Auto
Auto
.col-is-one-quarter
Auto
Auto 

  <div class="row">
    <div class="col col-is-three-quarters">
      .col-is-three-quarters
    </div>
    <div class="col">
      Auto
    </div>
    <div class="col">
      Auto
    </div>
  </div>

  <div class="row">
    <div class="col col-is-half">
      .col-is-half
    </div>
    <div class="col">
      Auto
    </div>
    <div class="col">
      Auto
    </div>
  </div>

  <div class="row">
    <div class="col col-is-one-quarter">
      .col-is-one-quarter
    </div>
    <div class="col">
      Auto
    </div>
    <div class="col">
      Auto
    </div>
  </div>

Responsiveness#

By default, columns will naturally wrap based on the viewport and content inside each column. If you'd like to make all columns stacked on different viewports, simply add one of the following classes to a .row

  • - .is-widescreen
  • - .is-desktop
  • - .is-tablet
  • - .is-mobile

Adding one of the above classes to a .row will make all child .col columns be stacked on that particular viewport and down.

Widescreen#

Resize your browser to see the columns stack on the widescreen class.

.col
.col
.col

Desktop#

Resize your browser to see the columns stack on the desktop class.

.col
.col
.col

Tablet#

Resize your browser to see the columns stack on the tablet class.

.col
.col
.col

Mobile#

Resize your browser to see the columns stack on the mobile class.

.col
.col
.col

Different column sizes per viewport#

As well as using the basic classes for stacking columns, you can also change column sizes and utilise the same responsiveness classes at the same time. Simply add one of the viewport sizes, e.g: desktop to the end of a particular column size. Example below:

  • - .col-is-three-quarters-widescreen
  • - .col-is-three-quarters-desktop
  • - .col-is-half-tablet
  • - .col-is-half-mobile

Half Column: Widescreen#

Resize your browser to see the columns stack on the widescreen class.

.col-is-half-widescreen
.col
.col