--- a/devtools/client/inspector/grids/components/GridDisplaySettings.js
+++ b/devtools/client/inspector/grids/components/GridDisplaySettings.js
@@ -51,31 +51,35 @@ module.exports = createClass({
       },
       dom.span(
         {},
         getStr("layout.gridDisplaySettings")
       ),
       dom.ul(
         {},
         dom.li(
-          {},
+          {
+            className: "grid-settings-item"
+          },
           dom.label(
             {},
             dom.input(
               {
                 type: "checkbox",
                 checked: highlighterSettings.showInfiniteLines,
                 onChange: this.onShowInfiniteLinesCheckboxClick,
               }
             ),
             getStr("layout.extendGridLinesInfinitely")
           )
         ),
         dom.li(
-          {},
+          {
+            className: "grid-settings-item"
+          },
           dom.label(
             {},
             dom.input(
               {
                 type: "checkbox",
                 checked: highlighterSettings.showGridLineNumbers,
                 onChange: this.onShowGridLineNumbersCheckboxClick,
               }

--- a/devtools/client/inspector/layout/components/App.js
+++ b/devtools/client/inspector/layout/components/App.js
@@ -47,16 +47,17 @@ const App = createClass({
   },
 
   mixins: [ addons.PureRenderMixin ],
 
   render() {
     return dom.div(
       {
         id: "layout-container",
+        className: "devtools-monospace"
       },
       Accordion({
         items: [
           {
             header: BOXMODEL_L10N.getStr("boxmodel.title"),
             component: BoxModel,
             componentProps: this.props,
             opened: true,

--- a/devtools/client/themes/layout.css
+++ b/devtools/client/themes/layout.css
@@ -13,50 +13,55 @@
  * Common styles for shared components
  */
 
 .grid-container {
   display: flex;
   flex-direction: column;
   flex: 1;
   align-items: center;
+  min-width: 140px;
+  margin-bottom: 20px;
 }
 
 .grid-container > span {
   font-weight: bold;
   margin-bottom: 3px;
 }
 
 .grid-container > ul {
   list-style: none;
   margin: 0;
   padding: 0;
 }
 
-.grid-container li {
+.grid-container .grid-item {
   padding: 4px 0;
 }
 
 /**
  * Grid Container
  */
 
 #layout-grid-container {
   display: flex;
   flex-direction: column;
   margin: 5px;
+  padding: 10px;
 }
 
 /**
  * Grid Content
  */
 
 .grid-content {
   display: flex;
+  flex-wrap: wrap-reverse;
   flex: 1;
+  padding: 10px;
 }
 
 /**
  * Grid Outline
  */
 
 #grid-outline {
   margin: 5px auto;
@@ -108,8 +113,20 @@
   border: 1px solid var(--theme-highlight-gray);
   border-radius: 50%;
   cursor: pointer;
 }
 
 .grid-color-value {
   display: none;
 }
+
+/**
+ * Settings Item
+ */
+
+.grid-settings-item {
+  margin-bottom: 1px;
+}
+
+.grid-settings-item label {
+  line-height: 22px;
+}