--- a/devtools/client/inspector/grids/components/GridOutline.js
+++ b/devtools/client/inspector/grids/components/GridOutline.js
@@ -214,18 +214,18 @@ class GridOutline extends PureComponent 
     // In the future we will need to iterate over all fragments of a grid.
     let gridFragmentIndex = 0;
     const { id, color, gridFragments } = grid;
     const { rows, cols, areas } = gridFragments[gridFragmentIndex];
 
     const numberOfColumns = cols.lines.length - 1;
     const numberOfRows = rows.lines.length - 1;
     const rectangles = [];
-    let x = 1;
-    let y = 1;
+    let x = 0;
+    let y = 0;
     let width = 0;
     let height = 0;
 
     // Draw the cells contained within the grid outline border.
     for (let rowNumber = 1; rowNumber <= numberOfRows; rowNumber++) {
       height = GRID_CELL_SCALE_FACTOR * (rows.tracks[rowNumber - 1].breadth / 100);
 
       for (let columnNumber = 1; columnNumber <= numberOfColumns; columnNumber++) {
@@ -235,17 +235,17 @@ class GridOutline extends PureComponent 
         const gridCell = this.renderGridCell(id, gridFragmentIndex, x, y,
                                              rowNumber, columnNumber, color, gridAreaName,
                                              width, height);
 
         rectangles.push(gridCell);
         x += width;
       }
 
-      x = 1;
+      x = 0;
       y += height;
     }
 
     // Draw a rectangle that acts as the grid outline border.
     const border = this.renderGridOutlineBorder(this.state.width, this.state.height,
                                                 color);
     rectangles.unshift(border);
 
@@ -310,18 +310,18 @@ class GridOutline extends PureComponent 
     );
   }
 
   renderGridOutlineBorder(borderWidth, borderHeight, color) {
     return dom.rect(
       {
         key: "border",
         className: "grid-outline-border",
-        x: 1,
-        y: 1,
+        x: 0,
+        y: 0,
         width: borderWidth,
         height: borderHeight
       }
     );
   }
 
   renderOutline() {
     const {