--- a/devtools/server/actors/highlighters/css-grid.js
+++ b/devtools/server/actors/highlighters/css-grid.js
@@ -1126,33 +1126,46 @@ CssGridHighlighter.prototype = extend(Au
     return trackIndex + 1;
   },
 
   renderFragment(fragment) {
     if (!this.isValidFragment(fragment)) {
       return;
     }
 
+    let rowStart = fragment.rows.lines[0];
+    let rowEnd = fragment.rows.lines[fragment.rows.lines.length - 1];
+    let columnStart = fragment.cols.lines[0];
+    let columnEnd = fragment.cols.lines[fragment.cols.lines.length - 1];
+
+    const x1 = columnStart.start + columnStart.breadth;
+    const y1 = rowStart.start + rowStart.breadth;
+    const x2 = columnEnd.start;
+    const y2 = rowEnd.start;
+
+    const bounds = getBoundsFromPoints([
+      {x: x1, y: y1}, {x: x2, y: y1}, {x: x1, y: y2}, {x: x2, y: y2}]);
+
     this.renderLines(fragment.cols, COLUMNS, "left", "top", "height",
                      this.getFirstRowLinePos(fragment),
                      this.getLastRowLinePos(fragment));
     this.renderLines(fragment.rows, ROWS, "top", "left", "width",
                      this.getFirstColLinePos(fragment),
                      this.getLastColLinePos(fragment));
 
     if (this.options.showGridAreasOverlay) {
       this.renderGridAreaOverlay();
     }
 
     // Line numbers are rendered in a 2nd step to avoid overlapping with existing lines.
     if (this.options.showGridLineNumbers) {
       this.renderLineNumbers(fragment.cols, COLUMNS, "left", "top",
-                       this.getFirstRowLinePos(fragment));
+                       this.getFirstRowLinePos(fragment), bounds);
       this.renderLineNumbers(fragment.rows, ROWS, "top", "left",
-                       this.getFirstColLinePos(fragment));
+                       this.getFirstColLinePos(fragment), bounds);
     }
   },
 
   /**
    * Renders the grid area overlay on the css grid highlighter canvas.
    */
   renderGridAreaOverlay() {
     let padding = 1;
@@ -1325,17 +1338,17 @@ CssGridHighlighter.prototype = extend(Au
 
   /**
    * Render the grid lines given the grid dimension information of the
    * column or row lines.
    *
    * see @param for renderLines.
    */
   renderLineNumbers(gridDimension, dimensionType, mainSide, crossSide,
-              startPos) {
+              startPos, bounds) {
     let lineStartPos = startPos;
 
     for (let i = 0; i < gridDimension.lines.length; i++) {
       let line = gridDimension.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
@@ -1345,17 +1358,17 @@ CssGridHighlighter.prototype = extend(Au
       // Since here we're rendering only the positive line numbers, we have to skip any
       // implicit grid lines before the first tha is explicit.
       // For such lines the API returns always 0 as line's number.
       if (line.number === 0) {
         continue;
       }
 
       this.renderGridLineNumber(line.number, linePos, lineStartPos, line.breadth,
-        dimensionType);
+        dimensionType, bounds);
     }
   },
 
   /**
    * Render the grid line on the css grid highlighter canvas.
    *
    * @param  {Number} linePos
    *         The line position along the x-axis for a column grid line and
@@ -1423,17 +1436,18 @@ CssGridHighlighter.prototype = extend(Au
    *         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.
    */
-  renderGridLineNumber(lineNumber, linePos, startPos, breadth, dimensionType) {
+  renderGridLineNumber(lineNumber, linePos, startPos, breadth, dimensionType,
+      bounds) {
     let displayPixelRatio = getDisplayPixelRatio(this.win);
     let { devicePixelRatio } = this.win;
     let offset = (displayPixelRatio / 2) % 1;
 
     linePos = Math.round(linePos);
     startPos = Math.round(startPos);
     breadth = Math.round(breadth);
 
@@ -1460,22 +1474,47 @@ CssGridHighlighter.prototype = extend(Au
 
     let boxWidth = textWidth + 2 * padding;
     let boxHeight = textHeight + 2 * padding;
 
     // Calculate the x & y coordinates for the line number container, so that it is
     // centered on the line, and in the middle of the gap if there is any.
     let x, y;
 
+    // We need to also take the viewport into consideration when positioning line numbers
+    let { width, height } = getViewportDimensions(this.win);
+
+    // The offset of the grid line from the edge of the viewport
+    let numberBoxOffset = 0;
+
+    // We determine the approximate distance of the width/height bounds
+    // from the actual edge of viewport. If it's close, we offset the number
+    // by its box width.
+    if ((bounds.width / width > 0.9) || (bounds.height / height) > 0.9) {
+      numberBoxOffset += boxWidth / devicePixelRatio;
+    }
+
     if (dimensionType === COLUMNS) {
-      x = linePos + breadth / 2;
-      y = startPos;
+      x = (linePos + breadth / 2);
+      y = startPos + numberBoxOffset;
+
+      // Check if the column line position is near the right edge of the viewport.
+      // We use a ratio of 90% distance towards the edge from the origin.
+      if ((linePos / width) > 0.90) {
+        x -= numberBoxOffset;
+      }
     } else {
-      x = startPos;
-      y = linePos + breadth / 2;
+      x = startPos + numberBoxOffset;
+      y = (linePos + breadth / 2);
+
+      // Check if the row line position is near the bottom edge of the viewport.
+      // We use a ratio of 90% distance towards the edge from the origin.
+      if ((linePos / height) > 0.90) {
+        y -= numberBoxOffset;
+      }
     }
 
     [x, y] = apply(this.currentMatrix, [x, y]);
 
     x -= boxWidth / 2;
     y -= boxHeight / 2;
 
     if (!this.hasNodeTransformations) {