https://github.com/codler/grid-layout-polyfill
https://github.com/codler/grid-layout-polyfill
Last synced: 7 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/codler/grid-layout-polyfill
- Owner: codler
- License: mit
- Created: 2013-02-24T19:26:47.000Z (almost 13 years ago)
- Default Branch: gh-pages
- Last Pushed: 2014-04-21T13:40:43.000Z (almost 12 years ago)
- Last Synced: 2025-06-05T22:06:25.152Z (8 months ago)
- Language: JavaScript
- Size: 1.21 MB
- Stars: 105
- Watchers: 10
- Forks: 19
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Grid Layout Polyfill
Following this spec http://www.w3.org/TR/2012/WD-css3-grid-layout-20120322/ 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.
* Example of using grid css - http://jsfiddle.net/u6xZF/1/
* Example of the non-grid css - http://jsfiddle.net/Nnjpq/1/
Also the polyfill currently only polyfill the `-ms-` prefix
## How to use
Simply add the script after jQuery
### Options
**Methods**
* `$(grid).gridLayout('refresh')` will recalculate existing initiated grid. Useful when for example you have set a new height with JavaScript on the grid.
**Events**
```
$(grid).gridLayout({
// Resize event, triggers when window resize with 100ms delay to increase performance
'resize' : function() {}
})
```
## Browser support
* IE9+ and all other browsers
## Limitation
* 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;