--- a/devtools/server/actors/highlighters/css-grid.js
+++ b/devtools/server/actors/highlighters/css-grid.js
@@ -1223,37 +1223,43 @@ class CssGridHighlighter extends AutoRef
    */
   renderNegativeLineNumbers(gridDimension, dimensionType, mainSide, crossSide,
             startPos) {
     let lineStartPos = startPos;
 
     // Keep track of the number of collapsed lines per line position
     let stackedLines = [];
 
+    // Keep track of how many stacked numbers have been rendered.
+    let stackedIndex = 0;
+
     const { lines } = gridDimension;
 
     for (let i = 0, line; (line = lines[i++]);) {
       let linePos = line.start;
       let negativeLineNumber = i - lines.length - 1;
 
       // Check for overlapping lines. We render a second box beneath the last overlapping
       // line number to indicate there are lines beneath it.
       const gridLine = gridDimension.tracks[line.number - 1];
 
       if (gridLine) {
         const { breadth }  = gridLine;
 
         if (breadth === 0) {
           stackedLines.push(negativeLineNumber);
 
-          if (stackedLines.length > 0) {
+          if (stackedLines.length > 0 && stackedIndex === 0) {
             this.renderGridLineNumber(negativeLineNumber, linePos, lineStartPos,
               line.breadth, dimensionType, 1);
           }
 
+          stackedIndex++;
+
+          // If the second box has already been rendered, then skip this one.
           continue;
         }
       }
 
       // For negative line numbers, we want to display the smallest
       // value at the front of the stack.
       if (stackedLines.length) {
         negativeLineNumber = stackedLines[0];
@@ -1446,16 +1452,19 @@ class CssGridHighlighter extends AutoRef
    */
   renderLineNumbers(gridDimension, dimensionType, mainSide, crossSide,
               startPos) {
     let lineStartPos = startPos;
 
     // Keep track of the number of collapsed lines per line position
     let stackedLines = [];
 
+    // Keep track of how many stacked numbers have been rendered.
+    let stackedIndex = 0;
+
     const { lines } = gridDimension;
 
     for (let i = 0, line; (line = lines[i++]);) {
       let linePos = line.start;
 
       // 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).
@@ -1473,21 +1482,24 @@ class CssGridHighlighter extends AutoRef
       const gridLine = gridDimension.tracks[line.number - 1];
 
       if (gridLine) {
         const { breadth }  = gridLine;
 
         if (breadth === 0) {
           stackedLines.push(gridDimension.lines[i].number);
 
-          if (stackedLines.length > 0) {
+          if (stackedLines.length > 0 && stackedIndex === 0) {
             this.renderGridLineNumber(line.number, linePos, lineStartPos, line.breadth,
               dimensionType, 1);
           }
 
+          stackedIndex++;
+
+          // If the second box has already been rendered, then skip this one.
           continue;
         }
       }
 
       this.renderGridLineNumber(line.number, linePos, lineStartPos, line.breadth,
         dimensionType);
     }
   }
@@ -1627,26 +1639,25 @@ class CssGridHighlighter extends AutoRef
       } else {
         x += offsetFromEdge;
       }
     }
 
     [x, y] = apply(this.currentMatrix, [x, y]);
 
     if (stackedLineIndex) {
-      // Offset the stacked line number by half of the box's width/height
-      const xOffset = boxWidth / 4;
-      const yOffset = boxHeight / 4;
+      // Offset the stacked line number by a quarter of the box's width/height
+      const boxOffset = boxHeight / 4;
 
       if (lineNumber > 0) {
-        x -= xOffset;
-        y -= yOffset;
+        x -= boxOffset;
+        y -= boxOffset;
       } else {
-        x += xOffset;
-        y += yOffset;
+        x += boxOffset;
+        y += boxOffset;
       }
     }
 
     if (!this.hasNodeTransformations) {
       x = Math.max(x, padding);
       y = Math.max(y, padding);
     }