Skip to main content


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.


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.

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


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.


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!

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


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

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.

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.


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}

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 .

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


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

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

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.