Adpative Cascading Grid Layout Plugin With jQuery - GridMaker

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.