Gridilydidily

A highly configurable, data-attribute driven and sass based flexbox grid with inline-block fallback.

Github Download
v2.2.0
1⁄8
7⁄8
2⁄8
6⁄8
3⁄8
5⁄8
4⁄8
4⁄8
5⁄8
3⁄8
6⁄8
2⁄8
7⁄8
1⁄8

Grid Modifiers

Gridilydididly has a lot of grid modifiers. Some of them are flexbox-only but it's only a matter of time before we can drop support for old IE. Until then Gridilydidily has inline-block fallback. 

<div class="grid" data-grid="left">
	<div class="grid__item" data-grid="3/12"> … </div>
	<div class="grid__item" data-grid="3/12"> … </div>
	<div class="grid__item" data-grid="3/12"> … </div>
</div>

<div class="grid" data-grid="center">
	<div class="grid__item" data-grid="3/12"> … </div>
	<div class="grid__item" data-grid="3/12"> … </div>
	<div class="grid__item" data-grid="3/12"> … </div>
</div>

<div class="grid" data-grid="right">
	<div class="grid__item" data-grid="3/12"> … </div>
	<div class="grid__item" data-grid="3/12"> … </div>
	<div class="grid__item" data-grid="3/12"> … </div>
</div>

<div class="grid" data-grid="top">
	<div class="grid__item" data-grid="4/12"> … </div>
	<div class="grid__item" data-grid="4/12"> … </div>
	<div class="grid__item" data-grid="4/12"> … </div>
</div>

<div class="grid" data-grid="middle">
	<div class="grid__item" data-grid="4/12"> … </div>
	<div class="grid__item" data-grid="4/12"> … </div>
	<div class="grid__item" data-grid="4/12"> … </div>
</div>

<div class="grid" data-grid="bottom">
	<div class="grid__item" data-grid="4/12"> … </div>
	<div class="grid__item" data-grid="4/12"> … </div>
	<div class="grid__item" data-grid="4/12"> … </div>
</div>

<div class="grid" data-grid="forwards">
	<div class="grid__item" data-grid="4/12"> 1 </div>
	<div class="grid__item" data-grid="4/12"> 2 </div>
	<div class="grid__item" data-grid="4/12"> 3 </div>
</div>

<div class="grid" data-grid="backwards">
	<div class="grid__item" data-grid="4/12"> 1 </div>
	<div class="grid__item" data-grid="4/12"> 2 </div>
	<div class="grid__item" data-grid="4/12"> 3 </div>
</div>

<div class="grid" data-grid="between">
	<div class="grid__item" data-grid="3/12"> … </div>
	<div class="grid__item" data-grid="3/12"> … </div>
	<div class="grid__item" data-grid="3/12"> … </div>
</div>

<div class="grid" data-grid="around">
	<div class="grid__item" data-grid="3/12"> … </div>
	<div class="grid__item" data-grid="3/12"> … </div>
	<div class="grid__item" data-grid="3/12"> … </div>
</div>

<div class="grid" data-grid="equal">
	<div class="grid__item" data-grid="4/12 fill">
		<div data-grid="fill"> … </div>
	</div>
	<div class="grid__item" data-grid="4/12 fill">
		<div data-grid="fill"> … </div>
	</div>
	<div class="grid__item" data-grid="4/12 fill">
		<div data-grid="fill"> … </div>
	</div>
</div>
1
2
3
1
2
3
Row
…

Multiple modifiers

You can use multiple modifiers at the same time! It's dead simple – just seperate them with a space. 

<div class="grid" data-grid="center middle backwards">
	<div class="grid__item" data-grid="3/12"> … </div>
	<div class="grid__item" data-grid="3/12"> … </div>
	<div class="grid__item" data-grid="3/12"> … </div>
</div>

Breakpoints

But how about breakpoints? Use them in a BEM-like data-attribute syntax and all your problems will resolve itself. You can define your needed breakpoints in your $grid-settings. 

<div class="grid" data-grid="center" data-grid--medium="right" data-grid--large="left">
	<div class="grid__item" data-grid="3/12"> … </div>
	<div class="grid__item" data-grid="3/12"> … </div>
	<div class="grid__item" data-grid="3/12"> … </div>
</div>

Item Modifiers

Each grid-item can also have additional modifiers for sorting, pushing and pulling. You can use and reset them at different breakpoints too. 

<div class="grid">
	<div class="grid__item" data-grid="4/12"> 1 </div>
	<div class="grid__item" data-grid="4/12 first"> 2 </div>
	<div class="grid__item" data-grid="4/12"> 3 </div>
</div>

<div class="grid">
	<div class="grid__item" data-grid="4/12"> 1 </div>
	<div class="grid__item" data-grid="4/12 last"> 2 </div>
	<div class="grid__item" data-grid="4/12"> 3 </div>
</div>

<div class="grid">
	<div class="grid__item" data-grid="4/12"> 1 </div>
	<div class="grid__item" data-grid="4/12 reset-order"> 2 </div>
	<div class="grid__item" data-grid="4/12"> 3 </div>
</div>

<div class="grid">
	<div class="grid__item" data-grid="3/12 push--1/12"> … </div>
	<div class="grid__item" data-grid="4/12"> … </div>
	<div class="grid__item" data-grid="4/12"> … </div>
</div>

<div class="grid">
	<div class="grid__item" data-grid="3/12 pull--1/12"> … </div>
	<div class="grid__item" data-grid="4/12"> … </div>
	<div class="grid__item" data-grid="4/12"> … </div>
</div>

<div class="grid">
	<div class="grid__item" data-grid="auto"> … </div>
	<div class="grid__item" data-grid="auto"> … </div>
	<div class="grid__item" data-grid="auto"> … </div>
	<div class="grid__item" data-grid="auto"> … </div>
	<div class="grid__item" data-grid="auto"> … </div>
</div>
1
2
3
1
2
3
1
2
3
push--1/12
pull--1/12

Gutters

Create you own gutters in $grid-settings and use them like grid modifiers at your defined breakpoints. In addition, you can also make use of different vertical gutters – simply prefix them with v--. 

<div class="grid" data-grid="none" data-grid--large="wide v--narrow">
	<div class="grid__item" data-grid="4/12"> … </div>
	<div class="grid__item" data-grid="4/12"> … </div>
	<div class="grid__item" data-grid="4/12"> … </div>
	<div class="grid__item" data-grid="4/12"> … </div>
	<div class="grid__item" data-grid="4/12"> … </div>
	<div class="grid__item" data-grid="4/12"> … </div>
</div>

Support

All major browsers and IE10+. Get more info here.

IE8+ with inline-block fallback enabled.

Say whaaat?

Data-attribute driven? You should use classes dude!

Basically I agree but the previous version of Gridilydidily was based on classes and had some problems especially in readability. Look at this:

I prefer this
data-grid="5/12 first" data-grid--large="9/12"

instead of that
class="grid__item grid__item--6-12 grid__item--first large--grid__item--9-12"

We can also write proper fractions. Yay!

Install

Install with npm: npm install gridilydidily.

Or download the zip. Copy the files into your project folder. Import Gridilydidily with @import "gridilydidily.scss";. Use it with default settings or if you want to change something:

Add a $grid-settings map with your custom settings before your @import of this grid files. All settings are explained below.

Settings

All settings for this grid are stored in a map called $grid-settings. I recommend to copy the default settings into your scss-file. After that you can configure how you want it.

Name
Type
Default
Description

Name

breakpoints

Type

map

Default

( … )

Description

Define your breakpoints you want to use with this grid. Take a look at the default values for the correct syntax.

Name

bases

Type

list

Default

( 12 )

Description

Which grid bases do you need? For example if you choose (12, 8, 4, 2) you can type 11/12, 6/8, 3/4 and 1/2 for your grid-item widths. Pushes and pulls are also affected. Mindblowing!

Name

gutters

Type

map

Default

( … )

Description

A list of gutter sizes you want to use. Take a look at the default values for the correct syntax.

Name

default-gutter

Type

number

Default

1.25em

Description

The default gutter-width. Nothing more.

Name

gutter-breakpoints

Type

boolean

Default

true

Description

Choose if you need to use different gutters at different breakpoints.

Name

vertical-gutters

Type

boolean

Default

true

Description

You need different vertical gutters to your horizontal gutters? Set this to true.

Name

fallback

Type

boolean

Default

true

Description

Gridilydidily comes with inline-block fallback. To use it, you have to use Modernizr for detecting flexbox support. Here's a custom Modernizr build for doing that.

Name

fallback-markup-fix

Type

boolean

Default

false

Description

You need to remove all whitespace between your grid-items for using this fallback correctly. I recommend to minify your HTML-output – otherwise you can set this option to true and this whitespace will be corrected with CSS (remember it's a hack and isn't working perfectly).

Name

grid-modifiers

Type

list

Default

( … )

Description

A comma separated list of all grid modifiers you want to use. Modifiers are: left, center, right, top, middle, bottom, forwards, backwards, between, around and equal.

Name

grid-modifier-breakpoints

Type

boolean

Default

true

Description

Choose if you need to use different grid modifiers at different breakpoints.

Name

item-modifiers

Type

list

Default

( … )

Description

A comma separated list of all item modifiers you want to use. Modifiers are: first, last, reset-order, push, pull and auto.

Name

item-modifier-breakpoints

Type

boolean

Default

true

Description

Choose if you need to use different item modifiers at different breakpoints. 
$grid-settings: (
	breakpoints: (
		small: 'only screen and (min-width: 400px)',
		medium: 'only screen and (min-width: 700px)',
		large: 'only screen and (min-width: 1200px)',
	),
	bases: (
		12,
	),
	gutters: (
		none: 0,
		narrow: .7em,
		normal: 1.25em,
		wide: 2.5em,
	),
	default-gutter: 1.25em,
	gutter-breakpoints: true,
	vertical-gutters: true,
	fallback: true,
	fallback-markup-fix: false,
	grid-modifiers: (
		left,
		center,
		right,
		top,
		middle,
		bottom,
		forwards,
		backwards,
		between,
		around,
		equal,
	),
	grid-modifier-breakpoints: true,
	item-modifiers: (
		first,
		last,
		reset-order,
		push,
		pull,
		auto,
	),
	item-modifier-breakpoints: true,
);
In Germany we say “geil”