Adpative Cascading Grid Layout Plugin With jQuery - GridMaker
File Size: | 5.91 KB |
---|---|
Views Total: | 2429 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

GridMaker is a simple, tiny jQuery plugin that helps you generate a responsive, adaptive, cascading grid layout from block elements with different sizes.
How to use it:
1. Add a group of block elements to a container named 'wrapper'.
<div id="wrapper"> <div class="block">Content 1</div> <div class="block">Content 2</div> <div class="block">Content 3</div> <div class="block">Content 4</div> <div class="block">Content 5</div> ... </div>
2. Put the latest version of jQuery library along with the jQuery GridMaker plugin's script at the bottom of the webpage.
<script src="//code.jquery.com/jquery-3.1.1.slim.min.js"></script> <script src="GridMaker.js"></script>
3. Create a new instance and pass the following parameters to the GridMaker
function.
- wrapper: the parent div of all block elements
- blockName: CSS selectors for block elements
- rows: how many rows
var example = new GridMaker("wrapper", "block", 4);
4. Enable the grid layout and done.
example.start();
5. The required CSS styles for the grid layout.
.grid-system-container .grid-row { width: 25%; padding: 1px; text-align: center; display: block; float: left; box-sizing: border-box; } .grid-system-container.row-1 .grid-row { width: 100%; } .grid-system-container.row-2 .grid-row { width: 50%; } .grid-system-container.row-3 .grid-row { width: 33.33%; } .grid-system-container.row-4 .grid-row { width: 25%; } .grid-system-container.row-5 .grid-row { width: 20%; } .grid-system-container.row-1 #row2, .grid-system-container.row-1 #row3, .grid-system-container.row-1 #row4, .grid-system-container.row-1 #row5, .grid-system-container.row-2 #row3, .grid-system-container.row-2 #row4, .grid-system-container.row-2 #row5, .grid-system-container.row-3 #row4, .grid-system-container.row-3 #row5, .grid-system-container.row-4 #row5 { display: none; }
This awesome jQuery plugin is developed by fpfarina. For more Advanced Usages, please check the demo page or visit the official website.