--- a/devtools/client/inspector/layout/components/Grid.js
+++ b/devtools/client/inspector/layout/components/Grid.js
@@ -21,38 +21,41 @@ module.exports = createClass({
   propTypes: {
     getSwatchColorPickerTooltip: PropTypes.func.isRequired,
     grids: PropTypes.arrayOf(PropTypes.shape(Types.grid)).isRequired,
     highlighterSettings: PropTypes.shape(Types.highlighterSettings).isRequired,
     onSetGridOverlayColor: PropTypes.func.isRequired,
     onToggleGridHighlighter: PropTypes.func.isRequired,
     onToggleShowGridLineNumbers: PropTypes.func.isRequired,
     onToggleShowInfiniteLines: PropTypes.func.isRequired,
+    onShowGridAreaHighlight: PropTypes.func.isRequired,
   },
 
   mixins: [ addons.PureRenderMixin ],
 
   render() {
     let {
       getSwatchColorPickerTooltip,
       grids,
       highlighterSettings,
       onSetGridOverlayColor,
       onToggleGridHighlighter,
       onToggleShowGridLineNumbers,
       onToggleShowInfiniteLines,
+      onShowGridAreaHighlight,
     } = this.props;
 
     return grids.length ?
       dom.div(
         {
           id: "layout-grid-container",
         },
         GridOutline({
           grids,
+          onShowGridAreaHighlight,
         }),
         GridList({
           getSwatchColorPickerTooltip,
           grids,
           onSetGridOverlayColor,
           onToggleGridHighlighter,
         }),
         GridDisplaySettings({

--- a/devtools/client/inspector/layout/components/GridOutline.js
+++ b/devtools/client/inspector/layout/components/GridOutline.js
@@ -18,16 +18,17 @@ const ViewportWidth = 450;
 const ViewportHeight = 100;
 
 module.exports = createClass({
 
   displayName: "GridOutline",
 
   propTypes: {
     grids: PropTypes.arrayOf(PropTypes.shape(Types.grid)).isRequired,
+    onShowGridAreaHighlight: PropTypes.func.isRequired,
   },
 
   mixins: [ addons.PureRenderMixin ],
 
   getInitialState() {
     return {
       selectedGrids: [],
     };
@@ -54,52 +55,74 @@ module.exports = createClass({
         y: 1,
         width: numberOfCols * 10,
         height: numberOfRows * 10,
       }
     );
   },
 
   /**
+  * getGridAreaName - Determines if grid cell is part of a grid area and
+  * returns the grid area name if it is
+  * @param {Object} fragment - Contains the row and col number of grid cell
+  * @param  {Array} areas - List of grid areas stored on grid fragment
+  * @returns {String} name -  If there is a grid area return area name, otherwise null
+  */
+
+  getGridAreaName({row, col}, areas) {
+    const gridArea = areas.find(area => (area.rowStart <= row && area.rowEnd > row) &&
+      (area.columnStart <= col && area.columnEnd > col));
+
+    if (!gridArea) {
+      return null;
+    }
+
+    return gridArea.name;
+  },
+
+  /**
   * processGridsToDraw - Determines what grid fragments to draw in the grid outline
   * by storing the fragment data for every highlighted grid
   * @param  {array} grids - List of grid objects returned from the redux store
   * @return {array} highlightedGrids -
   * List of fragment data objects for each highlighted grid
   */
 
   processGridsToDraw(grids) {
     const highlightedGrids = [];
 
     for (let grid of grids) {
       if (!grid.highlighted) {
         continue;
       }
-      // TODO: We are drawing the first fragment since only one is currently being stored.
-      // In future we will need to iterate over all fragments of a grid.
-      highlightedGrids.push(grid.gridFragments[0]);
+      highlightedGrids.push(grid);
     }
     return highlightedGrids;
   },
 
-  renderCell(fragment, columnNumber, rowNumber) {
+  renderCell(fragment, columnNumber, rowNumber, areas, nodeId) {
+    const name = this.getGridAreaName(fragment, areas);
     return dom.rect(
       {
         className: "grid-outline-cell",
+        "data-nodeId": nodeId,
+        "data-name": name,
         x: columnNumber,
         y: rowNumber,
         width: 10,
         height: 10,
         onMouseOver: this.onMouseOverCell,
       }
     );
   },
 
-  renderFragment(gridFragment) {
-    const { rows, cols } = gridFragment;
+  renderFragment({gridFragments, id}) {
+    // TODO: We are drawing the first fragment since only one is currently being stored.
+    // In future we will need to iterate over all fragments of a grid.
+    const { rows, cols, areas } = gridFragments[0];
 
     const numberOfColLines = cols.lines.length - 1;
     const numberOfRowLines = rows.lines.length - 1;
 
     const rectangles = [];
 
     // Draw a rectangle that acts as a border for the grid outline
     const border = this.drawGridOutlineBorder(numberOfRowLines, numberOfColLines);
@@ -107,31 +130,34 @@ module.exports = createClass({
     rectangles.push(border);
 
     let xpos = 1;
     let ypos = 1;
     const width = 10;
     const height = 10;
 
     // Draw the cells within the grid outline border
-    for (let row = 0; row < numberOfRowLines; row++) {
-      for (let col = 0; col < numberOfColLines; col++) {
-        rectangles.push(this.renderCell(cols.lines[col], xpos, ypos));
+    for (let row = 1; row <= numberOfRowLines; row++) {
+      for (let col = 1; col <= numberOfColLines; col++) {
+        rectangles.push(this.renderCell({col, row}, xpos, ypos, areas, id));
         xpos += width;
       }
       xpos = 1;
       ypos += height;
     }
 
     return rectangles;
   },
 
   onMouseOverCell({ target }) {
-    // TODO: We will want onMouseOver interactions with the grid cells, which is addressed
-    // in Bug 1337235
+    const { grids, onShowGridAreaHighlight } = this.props;
+    const nodeId = target.getAttribute("data-nodeId");
+    const name = target.getAttribute("data-name");
+
+    onShowGridAreaHighlight(grids[nodeId].nodeFront, name);
   },
 
   render() {
     return dom.svg(
       {
         className: "grid-outline",
         width: this.state.selectedGrids.length ? "100%" : 0,
         height: this.state.selectedGrids.length ? 100 : 0,

--- a/devtools/client/inspector/layout/layout.js
+++ b/devtools/client/inspector/layout/layout.js
@@ -221,16 +221,40 @@ LayoutView.prototype = {
       onShowBoxModelHighlighter: (options = {}) => {
         let toolbox = this.inspector.toolbox;
         let nodeFront = this.inspector.selection.nodeFront;
 
         toolbox.highlighterUtils.highlightNodeFront(nodeFront, options);
       },
 
       /**
+      * Handler for a change in the grid area being highlighted.
+      * Shows the grid area currently being highlighted.
+      * @param  {NodeFront} node
+      *     The NodeFront of the grid container element for which the grid
+      *         highlighter is toggled on/off for.
+      *
+      * @param  {String} gridAreaName
+      *         The name of the grid area for which the grid highlighter
+      *         is highlighted for.
+      *
+      */
+      onShowGridAreaHighlight: (node, gridAreaName) => {
+        let { grids, highlighterSettings } = this.store.getState();
+
+        highlighterSettings.showGridArea = gridAreaName;
+
+        for (let grid of grids) {
+          if (grid.highlighted) {
+            this.highlighters.showGridHighlighter(grid.nodeFront, highlighterSettings);
+          }
+        }
+      },
+
+      /**
        * Handler for a change in the input checkboxes in the GridList component.
        * Toggles on/off the grid highlighter for the provided grid container element.
        *
        * @param  {NodeFront} node
        *         The NodeFront of the grid container element for which the grid
        *         highlighter is toggled on/off for.
        */
       onToggleGridHighlighter: node => {