Skip to main content

Grid

The grid is the easiest way to produce a fluid responsive layout. Its easy to use and very flexible.

color key:

— grids are pink
— cells are blue
— padding is green

Basic Grid

Use the .o-grid class to wrap your .o-grid__cell elements.

first
second
third
<div class="o-grid o-grid--demo">
  <div class="o-grid__cell">
    <div class="o-grid-text">first</div>
  </div>
  <div class="o-grid__cell">
    <div class="o-grid-text">second</div>
  </div>
  <div class="o-grid__cell">
    <div class="o-grid-text">third</div>
  </div>
</div>

Widths

Use the .o-grid__cell--width-xx class to apply widths to your cells. If you add a width to one cell the other cells will automatically take up the rest of the space equally.

first
second
third
<div class="o-grid o-grid--demo">
  <div class="o-grid__cell o-grid__cell--width-50">
    <div class="o-grid-text">first</div>
  </div>
  <div class="o-grid__cell">
    <div class="o-grid-text">second</div>
  </div>
  <div class="o-grid__cell">
    <div class="o-grid-text">third</div>
  </div>
</div>

and use the .o-grid--full class to make all the cells full width.

first
second
third
<div class="o-grid o-grid--full o-grid--demo">
  <div class="o-grid__cell">
    <div class="o-grid-text">first</div>
  </div>
  <div class="o-grid__cell">
    <div class="o-grid-text">second</div>
  </div>
  <div class="o-grid__cell">
    <div class="o-grid-text">third</div>
  </div>
</div>

Offsets

To "push" a cell horizontally across the grid use the .o-grid__cell--offset-xx class. Use in-conjunction with widths to perfectly align your cells.

first
second
<div class="o-grid o-grid--demo">
  <div class="o-grid__cell o-grid__cell--width-20">
    <div class="o-grid-text">first</div>
  </div>
  <div class="o-grid__cell o-grid__cell--width-20 o-grid__cell--offset-60">
    <div class="o-grid-text">second</div>
  </div>
</div>

Wrapping

A grid is essentially a row of cells. However cells can wrap onto the next line within the grid.

Here we have 2 cells, 50% and 66.6666% wide, but the grid is only 100% wide...eek!

first
second
<div class="o-grid o-grid--demo">
  <div class="o-grid__cell o-grid__cell--width-50">
    <div class="o-grid-text">first</div>
  </div>
  <div class="o-grid__cell o-grid__cell--width-66">
    <div class="o-grid-text">second</div>
  </div>
</div>

To solve this we can wrap the cells within the grid by adding the .o-grid--wrap modifier class.

first
second
<div class="o-grid o-grid--wrap o-grid--demo">
  <div class="o-grid__cell o-grid__cell--width-50">
    <div class="o-grid-text">first</div>
  </div>
  <div class="o-grid__cell o-grid__cell--width-66">
    <div class="o-grid-text">second</div>
  </div>
</div>

Nesting

You can nest grids inside cells with relative ease...with nesting you're into advanced territory!

first
second
third
fourth
fifth
<div class="o-grid o-grid--demo">
  <div class="o-grid__cell">
    <div class="o-grid">
      <div class="o-grid__cell">
        <div class="o-grid-text">first</div>
      </div>
      <div class="o-grid__cell">
        <div class="o-grid-text">second</div>
      </div>
    </div>
    <div class="o-grid">
      <div class="o-grid__cell">
        <div class="o-grid-text">third</div>
      </div>
      <div class="o-grid__cell">
        <div class="o-grid-text">fourth</div>
      </div>
    </div>
  </div>
  <div class="o-grid__cell">
    <div class="o-grid-text">fifth</div>
  </div>
</div>
We've added padding to the cells as part of the demo.

Vertical Alignment

Per .o-grid

If one of your cells is tall you can apply a vertical alignment modifier class to the grid.

.o-grid--top, .o-grid--center and .o-grid--bottom are supported.

first
second
third
fourth
fourth
fourth
fourth
fourth
fifth
<div class="o-grid o-grid--bottom o-grid--demo">
  <div class="o-grid__cell">
    <div class="o-grid-text">first</div>
  </div>
  <div class="o-grid__cell">
    <div class="o-grid-text">second</div>
  </div>
  <div class="o-grid__cell">
    <div class="o-grid-text">third</div>
  </div>
  <div class="o-grid__cell">
    <div class="o-grid-text">fourth
      <br/>fourth
      <br/>fourth
      <br/>fourth
      <br/>fourth
      <br/>
    </div>
  </div>
  <div class="o-grid-text">fifth</div>
</div>

Per .o-grid__cell

You can override the vertical alignment of all the cells in the grid by specifying per cell.

.o-grid__cell--top, .o-grid__cell--center and .o-grid__cell--bottom are supported.

first
second
third
fourth
fourth
fourth
fourth
fourth 
<div class="o-grid o-grid--bottom o-grid--demo">
  <div class="o-grid__cell o-grid__cell--top">
    <div class="o-grid-text">first</div>
  </div>
  <div class="o-grid__cell o-grid__cell--center">
    <div class="o-grid-text">second</div>
  </div>
  <div class="o-grid__cell">
    <div class="o-grid-text">third</div>
  </div>
  <div class="o-grid__cell">
    <div class="o-grid-text">fourth
      <br/>fourth
      <br/>fourth
      <br/>fourth
      <br/>fourth
      <br/>
    </div>
  </div>
</div>

Responsiveness

The grid can be instructed to go full width at certain break points to maximise the screen space and help produce great user experiences on all sorts of devices.

The grid has a fit or full class modifier that is used at different screen sizes.

.o-grid--{small | medium | large}-{fit | full}

first
second
third
<div class="o-grid o-grid--small-full o-grid--medium-fit o-grid--large-full o-grid--demo">
    <div class="o-grid__cell">
      <div class="o-grid-text">first</div>
    </div>
    <div class="o-grid__cell">
      <div class="o-grid-text">second</div>
    </div>
    <div class="o-grid__cell">
      <div class="o-grid-text">third</div>
    </div>
  </div>

The above example will display the cells full width for small and large size screens. For medium screens the cells will adjust to fit the available space. Try it out, either resize your browser or rotate your phone into landscape.

Responsive Suffixes

As well as grid level responsiveness you also have control over the cells within a grid.

Individual cells can change width at specific break points by using responsive suffixes.

small
medium
large
<div class="o-grid o-grid--wrap o-grid--demo">
  <div class="o-grid__cell o-grid__cell--width-100 o-grid__cell--width-33@small">
    <div class="o-grid-text">small</div>
  </div>
  <div class="o-grid__cell o-grid__cell--width-100 o-grid__cell--width-33@medium">
    <div class="o-grid-text">medium</div>
  </div>
  <div class="o-grid__cell o-grid__cell--width-100 o-grid__cell--width-33@large">
    <div class="o-grid-text">large</div>
  </div>
</div>

As the viewport increases in size the cells go from 100% wide to 33% wide one after another, rather than all at once.

The suffixes apply to the screen sizes and up, in a mobile first manner. In other words:

Set cell width to 33% when screen width is greater than or equal to xsmall | small | medium | large | xlarge | super

Gutters

Blaze's grid comes with a gutter around each grid cell; some padding either side.

Sometimes you want your cells to be flush with each other. To turn off all gutters use .o-grid--no-gutter

first
second
third
<div class="o-grid o-grid--no-gutter o-grid--demo">
  <div class="o-grid__cell">
    <div class="o-grid-text">first</div>
  </div>
  <div class="o-grid__cell">
    <div class="o-grid-text">second</div>
  </div>
  <div class="o-grid__cell">
    <div class="o-grid-text">third</div>
  </div>
</div>

...or cell specific .o-grid__cell--no-gutter

first
second
third
<div class="o-grid o-grid--demo">
  <div class="o-grid__cell">
    <div class="o-grid-text">first</div>
  </div>
  <div class="o-grid__cell">
    <div class="o-grid-text">second</div>
  </div>
  <div class="o-grid__cell o-grid__cell--no-gutter">
    <div class="o-grid-text">third</div>
  </div>
</div>

Fixed widths

Usually cells in a grid will be fluid and responsive. If however you want to set a cell to a fixed width add the .o-grid__cell--width-fixed modifier and give it a specific width.

first
static width of 250px
third
<div class="o-grid o-grid--demo">
  <div class="o-grid__cell">
    <div class="o-grid-text">first</div>
  </div>
  <div class="o-grid__cell o-grid__cell--width-fixed" style={{width: '250px'}}>
    <div class="o-grid-text">static width of 250px</div>
  </div>
  <div class="o-grid__cell">
    <div class="o-grid-text">third</div>
  </div>
</div>