diff --git a/elements/rh-layouts/demo/index.html b/elements/rh-layouts/demo/index.html
index 89a194e479..9f105b8b9d 100644
--- a/elements/rh-layouts/demo/index.html
+++ b/elements/rh-layouts/demo/index.html
@@ -143,6 +143,21 @@ <h4>Code</h4>
         </section>
 
       </section>
+
+      <section>
+        <h2>Bullseye</h2>
+        <p>Used for centering all children (typically a single item) both vertically and horizontally within a parent element.</p>
+        <section>
+          <h3>Basic Bullseye</h3>
+          <div class="rh-l-bullseye">
+            <div class="rh-l-bullseye__item">Bam!</div>
+          </div>
+          <h4>Code</h4>
+          <pre><code class="lang-markup">&lt;div class="rh-l-bullseye"&gt;
+  &lt;div class="rh-l-bullseye__item"&gt;Bam!&lt;/div&gt;
+&lt;/div&gt;</code></pre>
+        </section>
+      </section>
     </article>
 
   </body>
diff --git a/elements/rh-layouts/rh-layouts.css b/elements/rh-layouts/rh-layouts.css
index d2170a74c4..3c12b32b53 100644
--- a/elements/rh-layouts/rh-layouts.css
+++ b/elements/rh-layouts/rh-layouts.css
@@ -7,9 +7,6 @@
 .rh-l--text-align--right {
   text-align: right; }
 
-:root {
-  --rh-l-grid--m-gutter--GridGap: var(--rh--global--gutter, $rh-global--gutter); }
-
 .rh-l-grid {
   display: grid;
   grid-template-columns: repeat(12, [col-start] 1fr); }
@@ -743,4 +740,12 @@
     .rh-l-grid > .rh-m-12-row-on-xl {
       grid-row: span 12; } }
   .rh-l-grid.rh-m-gutters {
-    grid-gap: var(--rh-l-grid--m-gutter--GridGap); }
\ No newline at end of file
+    grid-gap: var(--rh-l-grid--m-gutter--GridGap, 1rem); }
+
+.rh-l-bullseye {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  padding: var(--rh-l-bullseye--Padding, 1rem);
+  margin: 0; }
\ No newline at end of file
diff --git a/elements/rh-layouts/rh-layouts.scss b/elements/rh-layouts/rh-layouts.scss
index 6752f1695d..efe575c390 100644
--- a/elements/rh-layouts/rh-layouts.scss
+++ b/elements/rh-layouts/rh-layouts.scss
@@ -2,3 +2,4 @@
 
 @import "sass/alignments";
 @import "sass/grid";
+@import "sass/bullseye";
diff --git a/elements/rh-layouts/rh-layouts.story.js b/elements/rh-layouts/rh-layouts.story.js
new file mode 100644
index 0000000000..0f15f55fd8
--- /dev/null
+++ b/elements/rh-layouts/rh-layouts.story.js
@@ -0,0 +1,65 @@
+import { storiesOf } from "@storybook/polymer";
+
+storiesOf("Layouts", module).add(
+  "rh-layouts",
+  () => `
+  <link rel="stylesheet" type="text/css" href="/rh-layouts/rh-base.css">
+  <link rel="stylesheet" type="text/css" href="/rh-layouts/rh-layouts.css">
+  <style>
+  body {
+    padding: 32px;
+  }
+  section {
+    padding: 32px;
+    margin-bottom: 32px;
+    border-radius: 2px;
+    background: #fff;
+    border: 1px solid rgb(234, 234, 234);
+  }
+  section > h3 {
+    position: relative;
+    margin: -32px -32px 1em;
+    padding: 8px 32px;
+    border-bottom: 1px solid rgb(234, 234, 234);
+  }
+  .rh-l-grid > * {
+    background: #e0d7ee;
+    padding: 8px;
+  }
+  .rh-l-bullseye {
+    background: #e0d7ee;
+    height: 200px;
+  }
+  </style>
+  <section>
+    <h3>Pure Grid</h3>
+    <div class="rh-l-grid rh-m-gutters rh-m-all-6-col rh-m-all-4-col-on-md rh-m-all-3-col-on-lg">
+      <div>Item</div>
+      <div>Item</div>
+      <div>Item</div>
+      <div>Item</div>
+      <div>Item</div>
+    </div>
+  </section>
+  <section>
+    <h3>Bootstrap-style Columns</h3>
+    <div class="rh-l-grid rh-m-gutters">
+      <div class="rh-l-grid__item">Default Item</div>
+      <div class="rh-l-grid__item rh-m-2-col"><code>rh-m-2-col</code></div>
+      <div class="rh-l-grid__item rh-m-10-col"><code>rh-m-10-col</code></div>
+      <div class="rh-l-grid__item rh-m-4-col"><code>rh-m-4-col</code></div>
+      <div class="rh-l-grid__item rh-m-4-col"><code>rh-m-4-col</code></div>
+      <div class="rh-l-grid__item rh-m-4-col"><code>rh-m-4-col</code></div>
+      <div class="rh-l-grid__item rh-m-6-col rh-m-3-col-on-md"><code>rh-m-6-col rh-m-3-col-on-md</code></div>
+      <div class="rh-l-grid__item rh-m-6-col rh-m-3-col-on-md rh-m-startat-7-col-on-md"><code>rh-m-6-col rh-m-3-col-on-md rh-m-startat-7-col-on-md</code></div>
+      <div class="rh-l-grid__item rh-m-6-col rh-m-3-col-on-md"><code>rh-m-6-col rh-m-3-col-on-md</code></div>
+    </div>
+  </section>
+  <section>
+    <h3>Basic Bullseye</h3>
+    <div class="rh-l-bullseye">
+      <div class="rh-l-bullseye__item">Bam!</div>
+    </div>
+  </section>
+  `
+);
diff --git a/elements/rh-layouts/sass/_bullseye.scss b/elements/rh-layouts/sass/_bullseye.scss
new file mode 100644
index 0000000000..e448514f3a
--- /dev/null
+++ b/elements/rh-layouts/sass/_bullseye.scss
@@ -0,0 +1,26 @@
+// ============================================================================
+// Note: There should be no direct HEX or other values in this file.
+// Please reference RH-SASS variables.
+// ============================================================================
+//
+// Global vars are named:
+// `$rh-global--concept--PropertyTitleCase--modifier--state`
+// For example:
+// * $rh-global--color--primary
+// * $rh-global--FontSize
+// * --rh-theme--FontSize--heading--xs
+
+// Component/Element vars are named:
+// `$rh-c-block__element--modifier--state--PropertyTitleCase`
+// For example:
+// * --rh-dropdown--heading--FontSize
+// * --cp-accordion--heading--FontSize
+
+.rh-l-bullseye {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  padding: var(--rh-l-bullseye--Padding, $rh-global--spacer);
+  margin: 0;
+}
diff --git a/elements/rh-layouts/sass/_grid.scss b/elements/rh-layouts/sass/_grid.scss
index de47fcf236..ab9d19d33a 100644
--- a/elements/rh-layouts/sass/_grid.scss
+++ b/elements/rh-layouts/sass/_grid.scss
@@ -16,9 +16,11 @@
 // * --rh-dropdown--heading--FontSize
 // * --cp-accordion--heading--FontSize
 
-:root {
-  --rh-l-grid--m-gutter--GridGap: var(--rh--global--gutter, $rh-global--gutter);
-}
+// $rh-global--gutter: $rh-global--spacer;
+//
+// :root {
+//   --rh-l-grid--m-gutter--GridGap: var(--rh--global--gutter, $rh-global--gutter);
+// }
 
 /// Media query used to create responsive grid items
 /// @group mixins
@@ -125,6 +127,6 @@
   }
 
   &.rh-m-gutters {
-    grid-gap: var(--rh-l-grid--m-gutter--GridGap);
+    grid-gap: var(--rh-l-grid--m-gutter--GridGap, $rh-global--spacer);
   }
 }
diff --git a/package.json b/package.json
index cfb5f83440..894e173363 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,7 @@
     "postinstall": "npm run bootstrap && npm run wct-kludge",
     "precommit": "npm run update-test-suite > /dev/null && lint-staged",
     "update-test-suite": "node scripts/test-suite-inject.js",
-    "storybook": "start-storybook -c .storybook -p 9001",
+    "storybook": "start-storybook -c .storybook -p 9001 -s ./elements",
     "build-storybook": "build-storybook -c .storybook -o .storybook_out",
     "new": "cd elements && yo rhelement && npm run update-test-suite"
   },