Tired of searching for a simple, really customizable and powerful grid system? Look no further.

Why Gridle?

I know what you are thinking right now... "Why have you developed another fuckin grid system...". The answer is easy. Because each grid system out there have cool features, but none of them includes all. This is why Gridle is all about...

Fully featured

12, 8 or 33 columns, Gridle allows you to generate all the grids you want, with all the features you need (push, pull, prefix, hide-on, etc...)

Insanely responsive

Gridle is built to be excellent in responsive development. It provides a robust and simple system to handle media queries with ease.

Easy to use

Gridle is a set of complete and simple settings, mixins and classes that make the creation and usage of grid systems (even complex ones) really simple.

Flex as a choice

Want a "standard" or a "flex" grid, Gridle abstract all of this for you! All you need is choose the driver you want and use the classes and mixins, that's it!

Element queries

Gridle let you take advantage of elements queries with simple mixin syntax. Thanks to the help of the high performance "polyfill" from Marc J Schmidt.

Start using it now!

Don't be afraid, the power is not always hard to handle...

Get Started Now!
  • _settings.scss
  • grid.scss
  • index.html
  • style.scss

// import gridle
@import "gridle/gridle";

// setting up the grid
@include gridle_setup( (
	context : 12,
	gutter-width : 20px,
	direction : rtl,
	// etc...
) );

// make the use of media queries a piece of cake
@include gridle_register_state ( mobile , (
	max-width : 480px,
	gutter-width : 10px
) );

// import settings
@import "settings";

// generate the classes
@include gridle_generate_classes();

// give a max-width to the container
.container {
	max-width: 1200px;
	margin: 0 auto;

<dlv class="container">
	<dlv class="row">
		<div class="gr-12">
		<div class="gr-8 gr-12@mobile">
		<div class="gr-4 hide@mobile">
		<div class="gr-12">

// import settings
@import "settings";

#content {
	// using gridle_set
	@include gridle_set( (
		grid : 8,
		mobile : (
			grid : 12
	) );

	// using universal mixin
	@include gridle(8 mobile 12);
#sidebar {
	@include gridle_grid(4);
	@include gridle_state( mobile ) {
		@include gridle_grid(12);
		background: pink;
.component {
	background: red;

	// element queries support
	@include gridle_eq(-200px) {

Get Started Now!


Download the Gridle package with demo files and all you need to get started right here!


Ruby Gem

Need a simple way to install and update Gridle, use the Gridle Ruby Gem available by taping :


Another way to install and update Gridle, use the Gridle Bower Component available by taping :


Another simple way to install and update Gridle, use the Gridle NPM package available by taping :

Discover the Gridle best friend

An easy & complete documentation

A good framework is a documented framework. That's why Gridle has his own full and easy documentation. No need to be an advanced developper to use it.

Access full documentation

Help me to keep Gridle as good as possible

Gridle is a project that I maintain in my free time. All of this take me a lot of efforts so if you love Gridle, a little donation is as welcome as a fresh bier!

Stay in touch

Don't miss anything new about gridle, updates, etc... You will not be spammed don't worry

Fork me on GitHub