Responsive Fluid Grid System with jQuery and CSS3 - GridLayout
File Size: | 46.8 KB |
---|---|
Views Total: | 2394 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A very simple and lightweight jQuery grid system to create a responsive, fluid and dynamic grid layout that adapts to any screen size based on CSS3 media queries.
How to use it:
1. Include the jQuery library and jQuery Gridlayout plugin's javascript and CSS files in the html page.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="css/jquery.gridlayout.css"> <script type="text/javascript" src="js/jquery.gridlayout.js"></script>
2. Create a 12 columns grid layout following the Html structure like this:
<div class="grid"> <div class="grid_1">1</div> <div class="grid_11">11</div> </div> <div class="grid"> <div class="grid_2">2</div> <div class="grid_10">10</div> </div> <div class="grid"> <div class="grid_3">3</div> <div class="grid_9">9</div> </div> <div class="grid"> <div class="grid_4">4</div> <div class="grid_8">8</div> </div> <div class="grid"> <div class="grid_5">5</div> <div class="grid_7">7</div> </div> <div class="grid"> <div class="grid_6">6</div> <div class="grid_6">12</div> </div>
3. Call the plugin and set the CSS styles for each breakpoint.
<script type="text/javascript"> $(document).ready(function() { $('body').gridlayout({ 'points': { '720': { 'start': function() { $('.grid').addClass('active'); }, 'end': function() { $('.grid').removeClass('active'); } } } }); }); </script>
4. Style the grids with custom CSS styles.
.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 { ... } .grid_1:hover, .grid_2:hover, .grid_3:hover, .grid_4:hover, .grid_5:hover, .grid_6:hover, .grid_7:hover, .grid_8:hover, .grid_9:hover, .grid_10:hover, .grid_11:hover, .grid_12:hover { ... } .active .grid_1, .active .grid_2, .active .grid_3, .active .grid_4, .active .grid_5, .active .grid_6, .active .grid_7, .active .grid_8, .active .grid_9, .active .grid_10, .active .grid_11, .active .grid_12 { ... } .active .grid_1:hover, .active .grid_2:hover, .active .grid_3:hover, .active .grid_4:hover, .active .grid_5:hover, .active .grid_6:hover, .active .grid_7:hover, .active .grid_8:hover, .active .grid_9:hover, .active .grid_10:hover, .active .grid_11:hover, .active .grid_12:hover { ... }
5. Default options.
<script type="text/javascript"> $(document).ready(function() { $('body').gridlayout({ 'debug': false, 'delay': 250, 'points': { '320': { 'start': null, 'end': null }, '640': { 'start': null, 'end': null }, '768': { 'start': null, 'end': null }, '1024': { 'start': null, 'end': null }, }, 'timeout': null }); }); </script>
This awesome jQuery plugin is developed by jeandesravines. For more Advanced Usages, please check the demo page or visit the official website.