Flexgrid jQuery Plugin Demos

By Jon Paul Miles

a = all

d = desktop

t = tablet

h = handheld

m = mobile

c = cell

words = desktop and tablet

Grid Classes

a-1
d-1
t-1
h-1
m-1
c-1
a-2
d-2
t-2
h-2
m-2
c-2
a-3
d-3
t-3
h-3
m-3
c-3
a-4
d-4
t-4
h-4
m-4
c-4
a-5
d-5
t-5
h-5
m-5
c-5
a-6
d-6
t-6
h-6
m-6
c-6
a-7
d-7
t-7
h-7
m-7
c-7
a-8
d-8
t-8
h-8
m-8
c-8
a-9
d-9
t-9
h-9
m-9
c-9
a-10
d-10
t-10
h-10
m-10
c-10
a-11
d-11
t-11
h-11
m-11
c-11
a-12
d-12
t-12
h-12
m-12
c-12
a-20
d-20
t-20
h-20
m-20
c-20
a-40
d-40
t-40
h-40
m-40
c-40
a-60
d-60
t-60
h-60
m-60
c-60
a-80
d-80
t-80
h-80
m-80
c-80
one
two
three
four
five
six
seven
eight
nine
ten
eleven
twelve
twenty
fourty
sixty
eighty

All grid classes can be overriden by more specific screen sizes. "a-6 t-4" will be 6 columns on all screen sizes except tablets, in which it would convert to 4 columns.

Wordnumbers apply to desktop and tablet sizes. Ex: .six, .four, .five

Try resizing the screen to see how the grid containers adapt

Desktop Screens (.desktop-only)

Tablet Screens (.tablet-only)

Mobile Screens (.mobile-only)

.six

.six

.four

.four

.four

.d-2

.t-3

.m-4

.c-6

.d-2

.t-3

.m-4

.c-6

.d-2

.t-3

.m-4

.c-12

.d-2

.t-3

.m-8

.c-4

.d-2

.t-6

.m-4

.c-4

.d-2

.t-6

.m-12

.c-4

.a-4

.t-12

.a-4

.t-6

.a-4

.t-6

Flexgrid also supports fifths

.a-20

.m-60

.a-20

.m-40

.a-20

.m-20

.c-40

.a-20

.m-60

.c-60

.a-20

.m-20

.c-12

.twenty

.eighty

Grid containers can be infinitely nested

.six

.a-6

.a-6

.a-4

.a-4

.a-4

.six

.a-4

.a-4

.a-4

.a-12

Elements can be reordered at different screen sizes by applying a couple classes.

1

.t-position-2

.m-position-3

2

.t-position-3

.m-position-1

3

.t-position-1

.m-position-2

Apply the .equal class to the parent of any set of flexgrid containers, and each container on the same row will have equal heights

Before:

.a-4

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem nam explicabo ad iusto tempora ab?

.a-4

Lorem ipsum dolor sit amet.

.a-4

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, facere ipsa sed pariatur sapiente debitis facilis delectus animi! Pariatur, ad ipsam sequi laboriosam quibusdam! Velit, voluptate, repudiandae, atque, natus deserunt non placeat aliquam quisquam qui quas delectus sunt esse ipsum.

.a-4

Lorem ipsum dolor.

.a-4

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, consequatur ipsum explicabo.

.a-4

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti, a tempore assumenda cumque dignissimos suscipit harum consectetur illum?

After:

.a-4

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem nam explicabo ad iusto tempora ab?

.a-4

Lorem ipsum dolor sit amet.

.a-4

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, facere ipsa sed pariatur sapiente debitis facilis delectus animi! Pariatur, ad ipsam sequi laboriosam quibusdam! Velit, voluptate, repudiandae, atque, natus deserunt non placeat aliquam quisquam qui quas delectus sunt esse ipsum.

.a-4

Lorem ipsum dolor.

.a-4

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, consequatur ipsum explicabo.

.a-4

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti, a tempore assumenda cumque dignissimos suscipit harum consectetur illum?

Two more jQuery features worth noting...

html inside of pre tags will be visible as is if a .show-html class is added to the pre tags.

			
This content did not have character entities.

Also, video from youtube or vimeo automatically becomes responsive through jquery.