Responsive Full Page Grid Layout Plugin with jQuery - Fill.js

Fill.js is a jQuery plugin to create a fully responsive, flexible, full page grid layout for your single page project. All the rows and columns can be controlled via data-fill attribute to fit the parent container.

How to use it:

1. Load jQuery library and the fill.js script at the bottom of your web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="dist/fill.min.js"></script>

2. Create a grid layout with custom rows and columns using data-fill attribute.

<div id="fill-demo" class="fill-container">
  <header data-fill="row: 0; col: 0; colSpan:3">
    ...
  </header>
  <nav data-fill="row: 1; col: 0; rowSpan:2">
    ...
  </nav>
  <section data-fill="row: 1; col: 1">
    ...
  </section>
  <section data-fill="row: 2; col: 1">
    ...
  </section>
  <aside data-fill="row: 1; col: 2; rowSpan:2">
    ...
  </aside>
  <footer data-fill="row: 3; col: 0; colSpan:3">
    ...
  </footer>
</div>

3. Make the grid layout full page (100% height & 100% width).

.fill-container {
  width: 100%;
  height: 100%;
}

4. Initialize the full page grid layout.

$(".fill-container").fill({

padding: "1em",

create: function(evt, ui){
  $(".fill", this).each(displayDimension);
  // The fill-container is hidden via CSS to prevent flashing on
  // slow loading browsers. Once the plugin has applied the layout, we
  // can show the container.
  // NOTE: You must use visibility:hidden to hide the container and not
  // display: none. Display:none will prevent the plugin from
  // calculating regions sizes properly
  $(this).css("visibility", "visible");
},

resize: function(evt, ui){
  // Display the region dimensions in the UI.
  // NOTE: The displayed regions will be the interior dimensions excluding any
  // padding applied to the layout
  displayDimension(0, evt.target);
}

destroy: function(evt, ui){
  // Removes Fill from the parent element and returns it to its original state
}

});

5. API.

// initializtion
$(".fill-container").fill();

// destroy
$(".fill-container").fill("destroy");

// refresh
$(".fill-container").fill("refresh");

---

This awesome jQuery plugin is developed by boundingdog. For more Advanced Usages, please check the demo page or visit the official website.