A responsive, nestable, customisable n-col layout system.


Percentage based columns with five breakpoints for total control.


Columns within columns within columns. Ad infinitum.


Choose your gutters, column count, breakpoints, and namespacing.



Goodbye span3, hello grid__col 1/4.
Write it like you mean it.

Why Matryo?

Sometimes you don’t want — or need — the bells and whistles of a fully featured framework.

Matryo is a Sass library that gives you the building block of your project: a kick-ass grid system that’s as complex or simple as you need it to be.

If you only want 4 columns, Matryo will only create styles for those 4 columns. If you only want 2 breakpoints, Matryo will only create the styles for those breakpoints. Matryo scales with your requirements.

How does it work?

Set your grid variables and @import it into your Sass file. Done.

You give a column a default width like <div class="grid__col 3/4">, and then using responsive namespaced modifiers you can change the column's width. So if you wanted that two-thirds column to be one-half on really small screens, you'd use <div class="grid__col 3/4 xs-1/2">. ('xs' - and others - can be renamed to whatever you want!)

Check out the docs for more detailed examples including reverse grids, nesting grids, flush grids and using the media queries with your other styles.