--- a/devtools/server/actors/highlighters.css
+++ b/devtools/server/actors/highlighters.css
@@ -187,17 +187,17 @@
   overflow: hidden;
   white-space: nowrap;
   direction: ltr;
   padding-bottom: 1px;
   display: flex;
 }
 
 :-moz-native-anonymous .box-model-infobar-tagname {
-  color: hsl(285,100%, 75%);
+  color: hsl(285, 100%, 75%);
 }
 
 :-moz-native-anonymous .box-model-infobar-id {
   color: hsl(103, 46%, 54%);
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
@@ -231,20 +231,28 @@
 
 :-moz-native-anonymous .css-grid-areas,
 :-moz-native-anonymous .css-grid-cells {
   fill: #CEC0ED;
   stroke: none;
 }
 
 :-moz-native-anonymous .css-grid-area-infobar-name,
-:-moz-native-anonymous .css-grid-cell-infobar-position {
+:-moz-native-anonymous .css-grid-cell-infobar-position,
+:-moz-native-anonymous .css-grid-line-infobar-position {
   color: hsl(285, 100%, 75%);
 }
 
+:-moz-native-anonymous .css-grid-line-infobar-names:not(:empty) {
+  color: hsl(210, 30%, 85%);
+  border-inline-start: 1px solid #5a6169;
+  margin-inline-start: 6px;
+  padding-inline-start: 6px;
+}
+
 /* CSS Transform Highlighter */
 
 :-moz-native-anonymous .css-transform-transformed {
   fill: var(--highlighter-content-color);
   opacity: 0.8;
 }
 
 :-moz-native-anonymous .css-transform-untransformed {

--- a/devtools/server/actors/highlighters/css-grid.js
+++ b/devtools/server/actors/highlighters/css-grid.js
@@ -124,16 +124,21 @@ const roundedRect = function (ctx, x, y,
  * - showGridArea(areaName)
  *     @param  {String} areaName
  *     Shows the grid area highlight for the given area name.
  * - showGridCell({ gridFragmentIndex: Number, rowNumber: Number, columnNumber: Number })
  *     @param  {Object} { gridFragmentIndex: Number, rowNumber: Number,
  *                        columnNumber: Number }
  *     An object containing the grid fragment index, row and column numbers to the
  *     corresponding grid cell to highlight for the current grid.
+ * - showGridLineNames({ gridFragmentIndex: Number, lineNumber: Number,
+ *                       type: String })
+ *     @param  {Object} { gridFragmentIndex: Number, lineNumber: Number }
+ *     An object containing the grid fragment index and line number to the
+ *     corresponding grid line to highlight for the current grid.
  * - showGridLineNumbers(isShown)
  *     @param  {Boolean} isShown
  *     Displays the grid line numbers on the grid lines if isShown is true.
  * - showInfiniteLines(isShown)
  *     @param  {Boolean} isShown
  *     Displays an infinite line to represent the grid lines if isShown is true.
  *
  * Structure:
@@ -144,25 +149,32 @@ const roundedRect = function (ctx, x, y,
  *       <path class="css-grid-areas" points="..." />
  *       <path class="css-grid-cells" points="..." />
  *     </g>
  *   </svg>
  *   <div class="css-grid-area-infobar-container">
  *     <div class="css-grid-infobar">
  *       <div class="css-grid-infobar-text">
  *         <span class="css-grid-area-infobar-name">Grid Area Name</span>
- *         <span class="css-grid-area-infobar-dimensions"Grid Area Dimensions></span>
+ *         <span class="css-grid-area-infobar-dimensions">Grid Area Dimensions></span>
  *       </div>
  *     </div>
  *   </div>
  *   <div class="css-grid-cell-infobar-container">
  *     <div class="css-grid-infobar">
  *       <div class="css-grid-infobar-text">
  *         <span class="css-grid-cell-infobar-position">Grid Cell Position</span>
- *         <span class="css-grid-cell-infobar-dimensions"Grid Cell Dimensions></span>
+ *         <span class="css-grid-cell-infobar-dimensions">Grid Cell Dimensions></span>
+ *       </div>
+ *     </div>
+ *   <div class="css-grid-line-infobar-container">
+ *     <div class="css-grid-infobar">
+ *       <div class="css-grid-infobar-text">
+ *         <span class="css-grid-line-infobar-position">Grid Line Position</span>
+ *         <span class="css-grid-line-infobar-names">Grid Line Names></span>
  *       </div>
  *     </div>
  *   </div>
  * </div>
  */
 function CssGridHighlighter(highlighterEnv) {
   AutoRefreshHighlighter.call(this, highlighterEnv);
 
@@ -356,16 +368,62 @@ CssGridHighlighter.prototype = extend(Au
       parent: cellTextbox,
       attributes: {
         "class": "cell-infobar-dimensions",
         "id": "cell-infobar-dimensions"
       },
       prefix: this.ID_CLASS_PREFIX
     });
 
+    // Building the grid line infobar markup
+    let lineInfobarContainer = createNode(this.win, {
+      parent: container,
+      attributes: {
+        "class": "line-infobar-container",
+        "id": "line-infobar-container",
+        "position": "top",
+        "hidden": "true"
+      },
+      prefix: this.ID_CLASS_PREFIX
+    });
+
+    let lineInfobar = createNode(this.win, {
+      parent: lineInfobarContainer,
+      attributes: {
+        "class": "infobar"
+      },
+      prefix: this.ID_CLASS_PREFIX
+    });
+
+    let lineTextbox = createNode(this.win, {
+      parent: lineInfobar,
+      attributes: {
+        "class": "infobar-text"
+      },
+      prefix: this.ID_CLASS_PREFIX
+    });
+    createNode(this.win, {
+      nodeType: "span",
+      parent: lineTextbox,
+      attributes: {
+        "class": "line-infobar-position",
+        "id": "line-infobar-position"
+      },
+      prefix: this.ID_CLASS_PREFIX
+    });
+    createNode(this.win, {
+      nodeType: "span",
+      parent: lineTextbox,
+      attributes: {
+        "class": "line-infobar-names",
+        "id": "line-infobar-names"
+      },
+      prefix: this.ID_CLASS_PREFIX
+    });
+
     return container;
   },
 
   destroy() {
     let { highlighterEnv } = this;
     highlighterEnv.off("navigate", this.onNavigate);
     highlighterEnv.off("will-navigate", this.onWillNavigate);
 
@@ -529,16 +587,30 @@ CssGridHighlighter.prototype = extend(Au
    * @param  {Number} options.columnNumber
    *         Column number of the grid cell to highlight.
    */
   showGridCell({ gridFragmentIndex, rowNumber, columnNumber }) {
     this.renderGridCell(gridFragmentIndex, rowNumber, columnNumber);
   },
 
   /**
+   * Shows the grid line highlight for the given grid line options.
+   *
+   * @param  {Number} options.gridFragmentIndex
+   *         Index of the grid fragment to render the grid line highlight.
+   * @param  {Number} options.lineNumber
+   *         Line number of the grid line to highlight.
+   * @param  {String} options.type
+   *         The dimension type of the grid line.
+   */
+  showGridLineNames({ gridFragmentIndex, lineNumber, type }) {
+    this.renderGridLineNames(gridFragmentIndex, lineNumber, type);
+  },
+
+  /**
    * Clear the grid cell highlights.
    */
   clearGridCell() {
     let cells = this.getElement("cells");
     cells.setAttribute("d", "");
   },
 
   /**
@@ -604,16 +676,21 @@ CssGridHighlighter.prototype = extend(Au
       this.showGridArea(this.options.showGridArea);
     }
 
     // Display the grid cell highlights if needed.
     if (this.options.showGridCell) {
       this.showGridCell(this.options.showGridCell);
     }
 
+    // Display the grid line names if needed.
+    if (this.options.showGridLineNames) {
+      this.showGridLineNames(this.options.showGridLineNames);
+    }
+
     this._showGrid();
     this._showGridElements();
 
     root.setAttribute("style",
       `position:absolute; width:${width}px;height:${height}px; overflow:hidden`);
 
     setIgnoreLayoutChanges(false, this.highlighterEnv.document.documentElement);
     return true;
@@ -658,16 +735,36 @@ CssGridHighlighter.prototype = extend(Au
     this.getElement("cell-infobar-position").setTextContent(position);
     this.getElement("cell-infobar-dimensions").setTextContent(dim);
 
     let container = this.getElement("cell-infobar-container");
     this._moveInfobar(container, x1, x2, y1, y2);
   },
 
   /**
+   * Update the grid information displayed in the grid line info bar.
+   *
+   * @param  {String} gridLineNames
+   *         Comma-separated string of names for the grid line.
+   * @param  {Number} gridLineNumber
+   *         The grid line number.
+   * @param  {Number} x
+   *         The x-coordinate of the grid line.
+   * @param  {Number} y
+   *         The y-coordinate of the grid line.
+   */
+  _updateGridLineInfobar(gridLineNames, gridLineNumber, x, y) {
+    this.getElement("line-infobar-position").setTextContent(gridLineNumber);
+    this.getElement("line-infobar-names").setTextContent(gridLineNames);
+
+    let container = this.getElement("line-infobar-container");
+    this._moveInfobar(container, x, x, y, y);
+  },
+
+  /**
    * Move the given grid infobar to the right place in the highlighter.
    *
    * @param  {Number} x1
    *         The first x-coordinate of the grid rectangle.
    * @param  {Number} x2
    *         The second x-coordinate of the grid rectangle.
    * @param  {Number} y1
    *         The first y-coordinate of the grid rectangle.
@@ -1166,24 +1263,74 @@ CssGridHighlighter.prototype = extend(Au
     let cells = this.getElement("cells");
     cells.setAttribute("d", path);
 
     this._updateGridCellInfobar(rowNumber, columnNumber, x1, x2, y1, y2);
     this._showGridCellInfoBar();
   },
 
   /**
+   * Render the grid line name highlight for the given grid fragment index, lineNumber,
+   * and dimensionType.
+   *
+   * @param  {Number} gridFragmentIndex
+   *         Index of the grid fragment to render the grid line highlight.
+   * @param  {Number} lineNumber
+   *         Line number of the grid line to highlight.
+   * @param  {String} dimensionType
+   *         The dimension type of the grid line.
+   */
+  renderGridLineNames(gridFragmentIndex, lineNumber, dimensionType) {
+    let fragment = this.gridData[gridFragmentIndex];
+
+    if (!fragment || !lineNumber || !dimensionType) {
+      return;
+    }
+
+    const { names } = fragment[dimensionType].lines[lineNumber - 1];
+    let linePos;
+
+    if (dimensionType === ROWS) {
+      linePos = fragment.rows.lines[lineNumber - 1];
+    } else if (dimensionType === COLUMNS) {
+      linePos = fragment.cols.lines[lineNumber - 1];
+    }
+
+    if (!linePos) {
+      return;
+    }
+
+    let currentZoom = getCurrentZoom(this.win);
+    let { bounds } = this.currentQuads.content[gridFragmentIndex];
+
+    const rowYPosition = fragment.rows.lines[0];
+    const colXPosition = fragment.rows.lines[0];
+
+    let x = dimensionType === COLUMNS
+      ? linePos.start + (bounds.left / currentZoom)
+      : colXPosition.start + (bounds.left / currentZoom);
+
+    let y = dimensionType === ROWS
+      ? linePos.start + (bounds.top / currentZoom)
+      : rowYPosition.start + (bounds.top / currentZoom);
+
+    this._updateGridLineInfobar(names.join(","), lineNumber, x, y);
+    this._showGridLineInfoBar();
+  },
+
+  /**
    * Hide the highlighter, the canvas and the infobars.
    */
   _hide() {
     setIgnoreLayoutChanges(true);
     this._hideGrid();
     this._hideGridElements();
     this._hideGridAreaInfoBar();
     this._hideGridCellInfoBar();
+    this._hideGridLineInfoBar();
     setIgnoreLayoutChanges(false, this.highlighterEnv.document.documentElement);
   },
 
   _hideGrid() {
     this.getElement("canvas").setAttribute("hidden", "true");
   },
 
   _showGrid() {
@@ -1209,11 +1356,19 @@ CssGridHighlighter.prototype = extend(Au
   _hideGridCellInfoBar() {
     this.getElement("cell-infobar-container").setAttribute("hidden", "true");
   },
 
   _showGridCellInfoBar() {
     this.getElement("cell-infobar-container").removeAttribute("hidden");
   },
 
+  _hideGridLineInfoBar() {
+    this.getElement("line-infobar-container").setAttribute("hidden", "true");
+  },
+
+  _showGridLineInfoBar() {
+    this.getElement("line-infobar-container").removeAttribute("hidden");
+  },
+
 });
 
 exports.CssGridHighlighter = CssGridHighlighter;