diff --git a/README.md b/README.md
index 1814fb9..d60c19a 100644
--- a/README.md
+++ b/README.md
@@ -4,7 +4,6 @@ Automatically annotate CSS Grid items, so they are correctly positioned in IE11.
-The script only checks 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`.
@@ -12,8 +11,9 @@ 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` (no template rows yet).
+- 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 than specified in the template columns, new rows will be created.
## TODO
diff --git a/css_grid_annotator.js b/css_grid_annotator.js
index ffdeecc..7316e8a 100644
--- a/css_grid_annotator.js
+++ b/css_grid_annotator.js
@@ -1,18 +1,12 @@
+// CSS Grid Annotator for IE 11
+//
+// Author: Tom Rothe
+// URL: https://github.com/motine/css_grid_annotator
+//
+// Please see notes in README.md.
+// NOTE: This annotation is quite expensive (only for IE11), because check every element on the page for its display type.
+// Furthermore, for each grid container we look through all style definitions.
/* eslint-disable */
-
-// // NOTE: Unfortunately, we can not move this script to its own file because somehow the transpiling does not work then anymore.
-// //
-// // Only applied when IE11 is found.
-// // Annotates the children of elements that have display-type grid.
-// // Based on the grid-template-columns style attribute, it annotates the children with grid-column and grid-row.
-// // NOTE: This script does not work if there is only grid-template-rows specified, it needs grid-template-rows-columns.
-// // NOTE: This annotation is quite expensive (only for IE11), because check every element on the page for its display type. Furthermore, for each grid container we look through all style definitions.
-// class GridItemAnnotator {
-// /* eslint-disable lines-between-class-members, no-console */
-
-
-// }
-
function cssGridAnnotate() {
// check if we have IE11
const agent = navigator.userAgent;
@@ -38,6 +32,7 @@ function cssGridAnnotate() {
}
}
+ // Based on the grid-template-columns style attribute, it annotates the children with grid-column and grid-row.
function annotateElement(elm) {
var colCount = getTemplateColCount(elm);
if (!colCount) { return; }
diff --git a/index.html b/index.html
index 7a0359b..825f31a 100644
--- a/index.html
+++ b/index.html
@@ -15,10 +15,16 @@
margin: 10px;
padding: 10px;
}
+
+ .hidden {
+ display: none;
+ }
+ Examples
+ Overflowing items are added to new rows
Lorem A
Ipsum B
@@ -27,6 +33,15 @@
Amet E
+
+
Lorem A
+
Ipsum B
+
Dolor C
+
Sit D
+
Amet E
+