Grid

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

Colour key:

Basic Grid

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

<div class="o-grid">
  <div class="o-grid__cell">first</div>
  <div class="o-grid__cell">second</div>
  <div class="o-grid__cell">third</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.

<div class="o-grid">
  <div class="o-grid__cell o-grid__cell--width-50">first</div>
  <div class="o-grid__cell">second</div>
  <div class="o-grid__cell">third</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.

<div class="o-grid">
  <div class="o-grid__cell o-grid__cell--width-20">first</div>
  <div class="o-grid__cell o-grid__cell--width-20 o-grid__cell--offset-60">second</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!

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

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

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

Nesting

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

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

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.

<div class="o-grid o-grid--bottom">
  <div class="o-grid__cell">first</div>
  <div class="o-grid__cell">second</div>
  <div class="o-grid__cell">third</div>
  <div class="o-grid__cell">
    fourth
    <br>fourth
    <br>fourth
    <br>fourth
    <br>fourth
    <br>
  </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.

<div class="o-grid o-grid--bottom">
  <div class="o-grid__cell o-grid__cell--top">first</div>
  <div class="o-grid__cell o-grid__cell--center">second</div>
  <div class="o-grid__cell">third</div>  <!-- the o-grid pushes this cell down  -->
  <div class="o-grid__cell">
    fourth
    <br>fourth
    <br>fourth
    <br>fourth
    <br>fourth
    <br>
  </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 }

<div class="o-grid o-grid--small-full o-grid--medium-fit o-grid--large-full">
  <div class="o-grid__cell">first</div>
  <div class="o-grid__cell">second</div>
  <div class="o-grid__cell">third</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 .

<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">first</div>
  <div class="o-grid__cell o-grid__cell--width-100 o-grid__cell--width-33@medium">second</div>
  <div class="o-grid__cell o-grid__cell--width-100 o-grid__cell--width-33@large">third</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

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

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

<div class="o-grid">
  <div class="o-grid__cell">first</div>
  <div class="o-grid__cell">second</div>
  <div class="o-grid__cell o-grid__cell--no-gutter">third</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.

<div class="o-grid">
  <div class="o-grid__cell">first</div>
  <div class="o-grid__cell o-grid__cell--width-fixed">second</div>
  <div class="o-grid__cell">third</div>
</div>