Skip to content
Automatically annotate CSS Grid items with row and column positions, so they are correctly positioned in IE11.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
README.md Update README.md May 6, 2019
css_grid_annotator.js fix typo Apr 10, 2019
demo.gif initial commit Mar 6, 2019
index.html re-order grid not only in IE Apr 8, 2019

README.md

CSS Grid Annotator

CSS Grid is great, but IE11 assumes that all items are in the first row and first column. Please check out this blog post by Valentina and me. So, you have to add a lot of styles to explicitly position your grid items. This script automatically adds the positioning attributes for IE11.

Demo: before, after

It looks through all elements on the page and checks if the display property equals -ms-grid. If so it will annotate each visible child with explicit -ms-grid-column / -ms-grid-row based on -ms-grid-columns (-ms-grid-rows are ignored).

Please check back under the releases tab for recent releases.

Gotchas

  • The script is only applied when IE11 is found.
  • The script does checks only for the prefixed grid property -ms-grid.
  • The script currently only supports grid-template-columns. This script does not work if there is only grid-template-rows specified.
  • If there are more items/children specified than columns in the the template, new rows will be created.
  • If there any of the children is annotated with an explicit -ms-grid-column or -ms-grid-row, the whole container will be skipped.
  • Hidden elements are skipped (type="hidden" or display: none).
  • The script also annotates containers which are dynamically inserted via JavaScript. But, items are only annotated if a grid container is inserted, inserting individual items stay unannotated.

More to do

  • Consider template rows.
  • Annotate items if they are dynamically added individually.

Contribute

Please feel free to add issues, to contribute via pull requests or to reach out to me.

You can’t perform that action at this time.