Awesome Grid - Responsive grid layout

Awesome Grid is a jQuery plugin that allows you to display a responsive grid layout stacked on top of each other into rows and columns.

• denizli escort
• denizli escort
• didim escort
• düzce escort
• edirne escort
• edirne escort
• edremit escort

Source: bhittani.com

1. INCLUDE JS FILES

<script type="text/javascript" src="/path/to/jquery.js"></script>
<script type="text/javascript" src="/path/to/awesome-grid.min.js"></script>

2. HTML

<ul class="grid">
        <li><h1>01</h1>Zero One
            <p>
                Awesome Grid allows you to easily layout an awesome grid
                like the one you see here. The grid is responsive which
                means it will adapt to the screen size
            </p>
        </li>
        <li><h1>02</h1>Zero Two
            <p>
                It is a javascript file (minified version) of just 2kb.
            </p>
        </li>
        <li><h1>07</h1>Zero Seven</li>
        <li><h1>08</h1>Zero Eigth<br /><img src="images/02.png" /></li>
        <li><h1>09</h1>Zero Nine</li>
        <li><h1>10</h1>One Zero</li>
        <li><h1>11</h1>One One</li>
        <li><h1>12</h1>One Two</li>
        <li><h1>13</h1>One Three</li>
        <li><h1>14</h1>One Four</li>
        <li><h1>15</h1>One Five</li>
</ul>

3. JAVASCRIPT

$(window).load(function(){
            $('ul.grid').AwesomeGrid({
                rowSpacing  : 14,
                colSpacing  : 14,
                columns     : {
                    'defaults' : 4,
                    '800' : 2
                }
            });
});

4. OPTIONS

$(window).load(function(){
        $('ul.grid').AwesomeGrid({
            rowSpacing  : 20,                // row gutter spacing
            colSpacing  : 20,                // column gutter spacing
            initSpacing : 0,                 // apply column spacing for the first elements
            responsive  : true,              // itching for responsiveness?
            fadeIn      : true,              // allow fadeIn effect for an element?
            hiddenClass : false,             // ignore an element having this class or false for none
            item        : 'li',              // item selector to stack on the grid
            onReady     : function(item){}   // callback fired when an element is stacked
            columns     : {                  // supply an object to display columns based on the viewport
                'defaults' : 4,              // default number of columns
                '800'      : 2               // when viewport <= 800, show 2 columns
            }                                // you can also use an integer instead of a json object if
                                             // you don't care about responsiveness
        });
});