diff --git a/README.md b/README.md
index 07acac0..8c03038 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 # CSS Grid Annotator
 
-Automatically annotate CSS Grid items, so they are correctly positioned in IE11.
+Automatically annotate [CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout) items with row and column positions, so they are correctly positioned in IE11.
 
 ![Demo: before, after](demo.gif)
 
@@ -14,7 +14,8 @@ Please check back under the releases tab for recent releases.
 - 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 than specified in the template columns, new rows will be created.
+- 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`).
 
 ## TODO
diff --git a/css_grid_annotator.js b/css_grid_annotator.js
index 3344612..e675b2f 100644
--- a/css_grid_annotator.js
+++ b/css_grid_annotator.js
@@ -26,17 +26,19 @@ function cssGridAnnotate() {
     var elements = parentElement.querySelectorAll("*");
     for (var i = 0; i < elements.length; i++) {
       var elm = elements[i];
-      if (isGridContainer(elm)) {
-        annotateElement(elm);
+      if (isGridContainer(elm) && !containsAnnotations(elm)) { // we only check grid container, but we ignore the ones with pre-defined annotations
+        annotateContainer(elm);
       }
     }
   }
 
-  // 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);
+  // it annotates the children with grid-column and grid-row, based on the grid-template-columns style attribute.
+  function annotateContainer(container) {
+    // determine columns
+    var colCount = getTemplateColCount(container);
     if (!colCount) { return; }
-    var children = elm.children;
+    // annotate children
+    var children = container.children;
     for (var i = 0, visibleIndex = 0; i < children.length; i++) { // i: which child do currently address?, visibleIndex: how many children were visible up until now? these two only differ if there are hidden elements
       var child = children[i];
       if (isHiddenElemeent(child)) { continue; }
@@ -55,6 +57,19 @@ function cssGridAnnotate() {
     return (elm.type === "hidden") || (window.getComputedStyle(elm).getPropertyValue("display") === "none");
   }
 
+  // returns true if any of the direct children has CSS_COL or CSS_ROW in their computed style.
+  function containsAnnotations(elm) {
+    var children = elm.children;
+    for (var i = 0; i < children.length; i++) {
+      var child = children[i];
+      var styles = window.getComputedStyle(child);
+      if (styles.getPropertyValue(CSS_COL) != "1" || styles.getPropertyValue(CSS_ROW) != "1") { // IE will automatically determine hat all elements are at (1, 1)
+        return true;
+      }
+    }
+    return false;
+  }
+
   // returns the number of elements in a computed grid-template-columns attribute.
   // We do not need to consider functions such as repeat or minmax, because they are not supported by IE11 anyway (so either the autoprefixer resolves them or the style definition is broken for IE11 anyway).
   function getTemplateColCount(elm) {
diff --git a/index.html b/index.html
index 96f2b34..a774072 100644
--- a/index.html
+++ b/index.html
@@ -19,6 +19,11 @@
     .hidden {
       display: none;
     }
+
+    .item1 { -ms-grid-column: 1; -ms-grid-row: 1; }
+    .item2 { -ms-grid-column: 2; -ms-grid-row: 1; }
+    .item3 { -ms-grid-column: 1; -ms-grid-row: 2; }
+    .item4 { -ms-grid-column: 2; -ms-grid-row: 2; }
   </style>
 </head>
 
@@ -46,12 +51,14 @@ <h2>Hidden markup is not considered</h2>
    </div>
 
   <h2>If any element has specific positions annotated, we leave it alone</h2>
+
+  You should see the elements in the right order (left->right, top->bottom).
+
   <div class="container">
-    <div class="elm">Lorem A</div>
-    <div class="elm">Ipsum B</div>
-    <div class="elm">Dolor C</div>
-    <div class="elm">Sit D</div>
-    <div class="elm">Amet E</div>
+    <div class="elm item4">4</div>
+    <div class="elm item2">2</div>
+    <div class="elm item1">1</div>
+    <div class="elm item3">3</div>
    </div>