Automatically annotate CSS Grid items with row and column positions, so they are correctly positioned in IE11.
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.
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.
-ms-grid
.grid-template-columns
. This script does not work if there is only grid-template-rows specified.-ms-grid-column
or -ms-grid-row
, the whole container will be skipped.type="hidden"
or display: none
).Please feel free to add issues, to contribute via pull requests or to reach out to me.