Skip to content


Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
A fluid asymmetrical animated grid plugin for jQuery
branch: master

This branch is even with jasonenglish:master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.


A fluid asymmetrical animated grid plugin for jQuery

Flex is an idea inspired by the old flash homepage on Searching google for anything that resembled that effect, lead me to a few plugins that were similar, but not the same. Saw one person say it was "quite impossible", thought it would be a fun challenge.

View Demo


How to use

Include the plugin after jQuery in your file

<script src="" type="text/javascript"></script>
<script src=""></script>

Create the structure of your tiles by individually placing them. As of right now it is expected each tile will be placed 10px away from each other as padding (this is to be resolved in issue #4)

<div class="flex">
    <a bg="a" style="left:0px;top:0px;width:250px;height:125px;" width="325" height="175">A</a>
    <a bg="b" style="left:260px;height:100px;top:0px;width:125px;" width="250" height="175">B</a>
    <a bg="c" style="left:395px;height:250px;top:0px;width:75px;" width="125" height="350">C</a>
    <a bg="d" style="left:480px;height:75px;top:0px;width:75px;" width="175" height="150">D</a>
    <a bg="e" style="left:565px;height:125px;top:0px;width:200px;" width="200" height="250">E</a>
    <a bg="f" style="left:480px;height:200px;top:85px;width:75px;" width="150" height="225">F</a>
    <a bg="g" style="left:0px;height:100px;top:135px;width:75px;" width="305" height="150">G</a>
    <a bg="h" style="left:260px;height:75px;top:110px;width:125px;" width="200" height="200">H</a>
    <a bg="i" style="left:85px;height:140px;top:135px;width:165px;" width="200" height="140">I</a>
    <a bg="j" style="left:565px;height:150px;top:135px;width:75px;" width="125" height="275">J</a>
    <a bg="k" style="left:650px;height:75px;top:135px;width:75px;" width="75" height="200">K</a>

Sample styling

    .flex {position:relative;width:850px;min-height:300px;margin:0 auto;border:0px solid red;margin-top:10px;}
    .flex a {background-color:white;display:block;width:100px;height:100px;border-radius:8px;position:absolute;background-repeat:no-repeat;background-position:center;border:3px solid white;cursor:pointer;text-align:left;text-shadow:1px 1px 20px #000;color:white;font-size:18px;font-weight:bold;text-indent:10px;line-height:30px;}
    [bg=a] {background-image:url(;}
    [bg=b] {background-image:url(;background-size:300px auto;}
    [bg=c] {background-image:url(;}
    [bg=d] {background-image:url(;}
    [bg=e] {background-image:url(;background-size:auto 280px;}
    [bg=f] {background-image:url(;background-size:auto 280px;}
    [bg=g] {background-image:url(;background-size:auto 200px;}
    [bg=h] {background-image:url(;}
    [bg=i] {background-image:url(;background-size:auto 200px;}
    [bg=j] {background-image:url(;background-size:auto 280px;}
    [bg=k] {background-image:url(;background-size:auto 280px;}

And finally, invoke the plugin

<script type="text/javascript">
    $(function() {

What's next - 0.3

  • Bounding container (issue #1)
  • Padding (issue #4)


Any help is greatly appreciated. Pull away.

Something went wrong with that request. Please try again.