--- a/devtools/server/actors/layout.js
+++ b/devtools/server/actors/layout.js
@@ -5,16 +5,17 @@
 "use strict";
 
 const { Actor, ActorClassWithSpec } = require("devtools/shared/protocol");
 const { flexboxSpec, gridSpec, layoutSpec } = require("devtools/shared/specs/layout");
 const nodeFilterConstants = require("devtools/shared/dom-node-filter-constants");
 const { getStringifiableFragments } =
   require("devtools/server/actors/utils/css-grid-utils");
 
+loader.lazyRequireGetter(this, "nodeConstants", "devtools/shared/dom-node-constants");
 loader.lazyRequireGetter(this, "CssLogic", "devtools/server/css-logic", true);
 
 /**
  * Set of actors the expose the CSS layout information to the devtools protocol clients.
  *
  * The |Layout| actor is the main entry point. It is used to get various CSS
  * layout-related information from the document.
  *
@@ -192,43 +193,42 @@ const LayoutActor = ActorClassWithSpec(l
     for (let {document} of this.tabActor.windows) {
       flexboxes = [...flexboxes, ...this.getFlexbox(document.documentElement)];
     }
 
     return flexboxes;
   },
 
   /**
-   * Returns an array of GridActor objects for all the grid containers found by iterating
-   * below the given rootNode.
+   * Returns an array of GridActor objects for all the grid elements contained in the
+   * given root node.
    *
-   * @param  {Node|NodeActor} rootNode
-   *         The root node to start iterating at.
+   * @param  {Node} node
+   *         The root node for grid elements
    * @return {Array} An array of GridActor objects.
    */
-  getGrids(rootNode) {
-    let grids = [];
-
-    if (!rootNode) {
-      return grids;
+  getGrids(node) {
+    if (!node) {
+      return [];
     }
 
-    let treeWalker = this.walker.getDocumentWalker(rootNode,
-      nodeFilterConstants.SHOW_ELEMENT);
-
-    while (treeWalker.nextNode()) {
-      let currentNode = treeWalker.currentNode;
-
-      if (currentNode.getGridFragments && currentNode.getGridFragments().length > 0) {
-        let gridActor = new GridActor(this, currentNode);
-        grids.push(gridActor);
-      }
+    // Root node can be a #document object, which does not support getElementsWithGrid.
+    if (node.nodeType === nodeConstants.DOCUMENT_NODE) {
+      node = node.documentElement;
     }
 
-    return grids;
+    let gridElements = node.getElementsWithGrid();
+    let gridActors = gridElements.map(n => new GridActor(this, n));
+
+    let frames = node.querySelectorAll("iframe, frame");
+    for (let frame of frames) {
+      gridActors = gridActors.concat(this.getGrids(frame.contentDocument));
+    }
+
+    return gridActors;
   },
 
   /**
    * Returns an array of GridActor objects for all existing grid containers found by
    * iterating below the given rootNode and including nested frames.
    *
    * @param  {NodeActor} rootNode
    * @return {Array} An array of GridActor objects.