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.

<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>
first
second
third

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>
first
second
third

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>
first
second

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>
first
second

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>
first
second

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>
first
second
third
fourth
fifth
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.

<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>
first
second
third
fourth
fourth
fourth
fourth
fourth

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>
first
second
third
fourth
fourth
fourth
fourth
fourth

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>
first
second
third

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>
small
medium
large

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>
first
second
third

...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>
first
second
third

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>
first
static width of 250px
third