No description or website provided.
JavaScript Shell

Grid Layout Polyfill

Following this spec because current IE10 is using that one.

The concept of this polyfill are trying to only change the CSS and not to edit any DOM elements.

Also the polyfill currently only polyfill the -ms- prefix

How to use

Simply add the script after jQuery

<script src="grid-layout-polyfill.min.js"></script>



  • $(grid).gridLayout('refresh') will recalculate existing initiated grid. Useful when for example you have set a new height with JavaScript on the grid.


    // Resize event, triggers when window resize with 100ms delay to increase performance
    'resize' : function() {} 

Browser support

  • IE9+ and all other browsers


  • IE9: If display: -ms-grid; are declared in inline-style, you need to add the attribute data-ms-grid on the element, because IE9 removes invalid css value.

What is covered?

display: -ms-grid;
-ms-grid-columns: 100px 1fr auto; /* Only pixel, fraction and auto units */
-ms-grid-rows: 100px 1fr auto; /* Only pixel, fraction and auto units */

-ms-grid-column: 1;
-ms-grid-row: 1;
-ms-grid-column-span: 1;
-ms-grid-row-span: 1;