--- a/devtools/client/inspector/grids/components/GridOutline.js
+++ b/devtools/client/inspector/grids/components/GridOutline.js
@@ -69,22 +69,22 @@ class GridOutline extends PureComponent 
   }
 
   componentWillReceiveProps({ grids }) {
     let selectedGrid = grids.find(grid => grid.highlighted);
 
     // Store the height of the grid container in the component state to prevent overflow
     // issues. We want to store the width of the grid container as well so that the
     // viewbox is only the calculated width of the grid outline.
-    let { width, height } = selectedGrid
+    let { width, height } = selectedGrid && selectedGrid.gridFragments.length
                             ? this.getTotalWidthAndHeight(selectedGrid)
                             : { width: 0, height: 0 };
     let showOutline;
 
-    if (selectedGrid) {
+    if (selectedGrid && selectedGrid.gridFragments.length) {
       const { cols, rows } = selectedGrid.gridFragments[0];
 
       // Show the grid outline if both the rows/columns are less than or equal
       // to their max prefs.
       showOutline = (cols.lines.length <= GRID_OUTLINE_MAX_COLUMNS_PREF) &&
                     (rows.lines.length <= GRID_OUTLINE_MAX_ROWS_PREF);
     }
 
@@ -382,17 +382,17 @@ class GridOutline extends PureComponent 
       this.doHighlightCell(target, type === "mouseleave");
       this.highlightTimeout = null;
     }, GRID_HIGHLIGHTING_DEBOUNCE);
   }
 
   render() {
     const { selectedGrid } = this.state;
 
-    return selectedGrid ?
+    return selectedGrid && selectedGrid.gridFragments.length ?
       dom.div(
         {
           id: "grid-outline-container",
           className: "grid-outline-container",
         },
         this.renderOutline()
       )
       :

--- a/devtools/client/inspector/grids/test/browser.ini
+++ b/devtools/client/inspector/grids/test/browser.ini
@@ -28,10 +28,11 @@ support-files =
 [browser_grids_grid-list-toggle-single-grid.js]
 [browser_grids_grid-outline-cannot-show-outline.js]
 [browser_grids_grid-outline-highlight-area.js]
 [browser_grids_grid-outline-highlight-cell.js]
 [browser_grids_grid-outline-selected-grid.js]
 [browser_grids_grid-outline-updates-on-grid-change.js]
 [browser_grids_grid-outline-writing-mode.js]
 [browser_grids_highlighter-setting-rules-grid-toggle.js]
+[browser_grids_no_fragments.js]
 [browser_grids_number-of-css-grids-telemetry.js]
 [browser_grids_restored-after-reload.js]

new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/grids/test/browser_grids_no_fragments.js
@@ -0,0 +1,49 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that when grids exist but have no fragments, clicking on the checkbox doesn't
+// fail (see bug 1441462).
+
+const TEST_URI = `
+  <style type='text/css'>
+    #wrapper { display: none; }
+    .grid { display: grid; grid-template-columns: 1fr 1fr; }
+  </style>
+  <div id="wrapper">
+    <div class="grid">
+      <div>cell1</div>
+      <div>cell2</div>
+    </div>
+    <div class="grid">
+      <div>cell1</div>
+      <div>cell2</div>
+    </div>
+  </div>
+`;
+
+add_task(function* () {
+  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+
+  let { inspector, gridInspector } = yield openLayoutView();
+  let { document: doc } = gridInspector;
+  let { store } = inspector;
+
+  let gridList = doc.querySelector("#grid-list");
+  is(gridList.children.length, 2, "There are 2 grids in the list");
+
+  info("Try to click the first grid's checkbox");
+  let checkbox1 = gridList.children[0].querySelector("input");
+  let onCheckbox1Change = waitUntilState(store, state =>
+    state.grids[0] && state.grids[0].highlighted);
+  checkbox1.click();
+  yield onCheckbox1Change;
+
+  info("Try to click the second grid's checkbox");
+  let checkbox2 = gridList.children[1].querySelector("input");
+  let onCheckbox2Change = waitUntilState(store, state =>
+    state.grids[1] && state.grids[1].highlighted);
+  checkbox2.click();
+  yield onCheckbox2Change;
+});