Responsive Fluid Grid System with jQuery and CSS3 - GridLayout

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.