Create Dynamic Grid Layouts Easily with FreeWall

If you’re familiar with Windows 8 or Pinterest, you may recognize the dynamic grid layout. A dynamic grid allows you to rearrange and reposition child elements as needed, especially when resizing your browser window. A popular jQuery plugin for this is jQuery Masonry, but if you’re looking for more options and animations, consider FreeWall.

FreeWall is a free jQuery plugin developed by Minh Nguyen that allows you to create various types of grid layouts, including flexible layouts, metro-style layouts, nested grids, image layouts, and fluid grids. It also supports responsive design, making it ideal for websites across desktop, mobile, or tablet platforms.

Additionally, it offers beautiful CSS animations and callback events such as onGapFound, onComplete, onResize, and onSetBlock.

Getting Started

To begin working with FreeWall, you need to include the jQuery or Zepto framework. In this guide, we’ll use jQuery as an example to create a basic grid layout demo.

Let’s start by including the jQuery framework and the FreeWall plugin using the following code:

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="js/freewall.js"></script>

We’ll display some brick pieces as the container for our layout:

<h2>Normal Grid</h2>
<div class="free-wall">
<div class="brick size320"></div>
<div class="brick size320"></div>
<div class="brick size320"></div>
<div class="brick size320"></div>
<div class="brick size320"></div>
<div class="brick size320"</div>
</div>

We define our brick sizes using width and height values of 320px with the following style rule:

.size320 {
  width: 320px;
  height: 320px;
}

Next, let’s add some JavaScript code:

Make It Work

To give random colors to the bricks, we’ll define a color array and apply them using the Math.random() method:

var colour = [
  "rgb(142, 68, 173)",
  "rgb(243, 156, 18)",
  "rgb(211, 84, 0)",
  "rgb(0, 106, 63)",
  "rgb(41, 128, 185)",
  "rgb(192, 57, 43)",
  "rgb(135, 0, 0)",
  "rgb(39, 174, 96)"
];

$(".free-wall .size320").each(function() {
  var backgroundColor = colour[colour.length * Math.random() << 0];
  var bricks = $(this).find(".brick");
  if (!bricks.length) bricks = $(this);
  bricks.css({ backgroundColor: backgroundColor });
});

Lastly, let's add functions to make the layout display properly. Here is what makes FreeWall great: it offers options and methods to control the behavior of the grid:

animate: true, // Makes blocks move with animation.
block.flex: true, // Allows blocks to resize slightly to fit.
cell.width: number,
cell.height: number,
fillGap: true, // Creates a layout without gaps.
gutter: mixed, // Spacing between blocks.
selector: string, // Selects all blocks for layout.

Now let's call the plugin using the following code:

$(function() {
  $(".free-wall").each(function() {
    var wall = new freewall(this);
    wall.reset({
      selector: '.size320',
      cellW: function(container) {
        var cellWidth = 320;
        if (container.hasClass('size320')) {
          cellWidth = container.width() / 2;
        }
        return cellWidth;
      },
      cellH: function(container) {
        var cellHeight = 320;
        if (container.hasClass('size320')) {
          cellHeight = container.height() / 2;
        }
        return cellHeight;
      },
      fixSize: 0,
      gutterY: 20,
      gutterX: 20,
      onResize: function() {
        wall.fitWidth();
      }
    });
    wall.fitWidth();
  });
  $(window).trigger("resize");
});

As you can see in the function code above, we use several FreeWall options, methods, and events, such as fixSize, gutterY, gutterX, onResize, and fitWidth. For additional options, methods, or events, refer to the FreeWall documentation on the official homepage.

Now you can see the dynamic grid layout in action on the demo page. If you resize your browser, the bricks will automatically be rearranged and resized.

View demo Download source