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

File Size: 25.8 KB
Views Total: 4523
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="//"></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">
  <nav data-fill="row: 1; col: 0; rowSpan:2">
  <section data-fill="row: 1; col: 1">
  <section data-fill="row: 2; col: 1">
  <aside data-fill="row: 1; col: 2; rowSpan:2">
  <footer data-fill="row: 3; col: 0; colSpan:3">

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

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

4. Initialize the full page grid layout.


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

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


5. API.

// initializtion

// destroy

// refresh

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