--- a/devtools/server/actors/highlighters/css-grid.js
+++ b/devtools/server/actors/highlighters/css-grid.js
@@ -1129,21 +1129,21 @@ class CssGridHighlighter extends AutoRef
    *         The line position along the x-axis for a column grid line and
    *         y-axis for a row grid line.
    * @param  {Number} startPos
    *         The start position of the cross side of the grid line.
    * @param  {Number} breadth
    *         The grid line breadth value.
    * @param  {String} dimensionType
    *         The grid dimension type which is either the constant COLUMNS or ROWS.
-   * @param  {Number||undefined} stackedLineIndex
-   *         The line index position of the stacked line.
+   * @param  {Boolean||undefined} isStackedLine
+   *         Boolean indicating if the line is stacked.
    */
   renderGridLineNumber(lineNumber, linePos, startPos, breadth, dimensionType,
-    stackedLineIndex) {
+    isStackedLine) {
     let displayPixelRatio = getDisplayPixelRatio(this.win);
     let { devicePixelRatio } = this.win;
     let offset = (displayPixelRatio / 2) % 1;
     let fontSize = GRID_FONT_SIZE * displayPixelRatio;
     let canvasX = Math.round(this._canvasPosition.x * devicePixelRatio);
     let canvasY = Math.round(this._canvasPosition.y * devicePixelRatio);
 
     linePos = Math.round(linePos);
@@ -1194,17 +1194,17 @@ class CssGridHighlighter extends AutoRef
         x -= offsetFromEdge;
       } else {
         x += offsetFromEdge;
       }
     }
 
     [x, y] = apply(this.currentMatrix, [x, y]);
 
-    if (stackedLineIndex) {
+    if (isStackedLine) {
       // Offset the stacked line number by half of the box's width/height.
       const xOffset = boxWidth / 4;
       const yOffset = boxHeight / 4;
 
       if (lineNumber > 0) {
         x -= xOffset;
         y -= yOffset;
       } else {
@@ -1342,17 +1342,17 @@ class CssGridHighlighter extends AutoRef
         y += (boxHeight + arrowSize + radius) - boxHeight / 2;
         break;
     }
 
     // Write the line number inside of the rectangle.
     this.ctx.textAlign = "center";
     this.ctx.textBaseline = "middle";
     this.ctx.fillStyle = "black";
-    const numberText = stackedLineIndex ? "" : lineNumber;
+    const numberText = isStackedLine ? "" : lineNumber;
     this.ctx.fillText(numberText, x, y);
     this.ctx.restore();
   }
 
   /**
    * Render the grid line on the css grid highlighter canvas.
    *
    * @param  {Number} linePos
@@ -1460,48 +1460,42 @@ class CssGridHighlighter extends AutoRef
    * @param  {String} dimensionType
    *         The grid dimension type which is either the constant COLUMNS or ROWS.
    * @param  {Number} startPos
    *         The start position of the cross side ("left" for ROWS and "top" for COLUMNS)
    *         of the grid dimension.
    */
   renderLineNumbers(gridDimension, dimensionType, startPos) {
     const { lines, tracks } = gridDimension;
-    // Keep track of the number of collapsed lines per line position.
-    let stackedLines = [];
 
     for (let i = 0, line; (line = lines[i++]);) {
       // If you place something using negative numbers, you can trigger some implicit
       // grid creation above and to the left of the explicit grid (assuming a
       // horizontal-tb writing mode).
       //
       // The first explicit grid line gets the number of 1, and any implicit grid lines
       // before 1 get negative numbers. Since here we're rendering only the positive line
       // numbers, we have to skip any implicit grid lines before the first one that is
       // explicit. The API returns a 0 as the line's number for these implicit lines that
       // occurs before the first explicit line.
       if (line.number === 0) {
         continue;
       }
 
-      // Check for overlapping lines. We render a second box beneath the last overlapping
+      // Check for overlapping lines by measuring the track width between them.
+      // We render a second box beneath the last overlapping
       // line number to indicate there are lines beneath it.
-      const gridLine = tracks[line.number - 1];
+      const gridTrack = tracks[i - 1];
 
-      if (gridLine) {
-        const { breadth }  = gridLine;
+      if (gridTrack) {
+        const { breadth }  = gridTrack;
 
         if (breadth === 0) {
-          stackedLines.push(lines[i].number);
-
-          if (stackedLines.length > 0) {
-            this.renderGridLineNumber(line.number, line.start, startPos, line.breadth,
-              dimensionType, 1);
-          }
-
+          this.renderGridLineNumber(line.number, line.start, startPos, line.breadth,
+            dimensionType, true);
           continue;
         }
       }
 
       this.renderGridLineNumber(line.number, line.start, startPos, line.breadth,
         dimensionType);
     }
   }
@@ -1515,54 +1509,41 @@ class CssGridHighlighter extends AutoRef
    * @param  {String} dimensionType
    *         The grid dimension type which is either the constant COLUMNS or ROWS.
    * @param  {Number} startPos
    *         The start position of the cross side ("left" for ROWS and "top" for COLUMNS)
    *         of the grid dimension.
    */
   renderNegativeLineNumbers(gridDimension, dimensionType, startPos) {
     const { lines, tracks } = gridDimension;
-    // Keep track of the number of collapsed lines per line position.
-    let stackedLines = [];
 
     for (let i = 0, line; (line = lines[i++]);) {
       let linePos = line.start;
       let negativeLineNumber = line.negativeNumber;
 
       // Don't render any negative line number greater than -1.
       if (negativeLineNumber == 0) {
         break;
       }
 
-      // Check for overlapping lines. We render a second box beneath the last overlapping
+      // Check for overlapping lines by measuring the track width between them.
+      // We render a second box beneath the last overlapping
       // line number to indicate there are lines beneath it.
-      const gridLine = tracks[line.number - 1];
-
-      if (gridLine) {
-        const { breadth }  = gridLine;
+      const gridTrack = tracks[i - 1];
+      if (gridTrack) {
+        const { breadth } = gridTrack;
 
-        if (breadth === 0) {
-          stackedLines.push(negativeLineNumber);
-
-          if (stackedLines.length > 0) {
-            this.renderGridLineNumber(negativeLineNumber, linePos, startPos,
-              line.breadth, dimensionType, 1);
-          }
-
+        // Ensure "-1" is always visible, since it is always the largest number.
+        if (breadth === 0 && negativeLineNumber != -1) {
+          this.renderGridLineNumber(negativeLineNumber, linePos, startPos,
+            line.breadth, dimensionType, true);
           continue;
         }
       }
 
-      // For negative line numbers, we want to display the smallest
-      // value at the front of the stack.
-      if (stackedLines.length) {
-        negativeLineNumber = stackedLines[0];
-        stackedLines = [];
-      }
-
       this.renderGridLineNumber(negativeLineNumber, linePos, startPos, line.breadth,
         dimensionType);
     }
   }
 
   /**
    * Update the highlighter on the current highlighted node (the one that was
    * passed as an argument to show(node)). Should be called whenever node's geometry