diff --git a/node_modules/material-design-lite/src/grid/snippets/codepen-grid.css b/node_modules/material-design-lite/src/grid/snippets/codepen-grid.css
new file mode 100644
index 0000000..b716189
--- /dev/null
+++ b/node_modules/material-design-lite/src/grid/snippets/codepen-grid.css
@@ -0,0 +1,11 @@
+.mdl-cell {
+  box-sizing: border-box;
+  background-color: #BDBDBD;
+  height: 200px;
+  padding-left: 8px;
+  padding-top: 4px;
+  color: white;
+}
+.mdl-grid:first-of-type .mdl-cell {
+  height: 50px;
+}
diff --git a/node_modules/material-design-lite/src/grid/snippets/grid-demo.html b/node_modules/material-design-lite/src/grid/snippets/grid-demo.html
new file mode 100644
index 0000000..88f6040
--- /dev/null
+++ b/node_modules/material-design-lite/src/grid/snippets/grid-demo.html
@@ -0,0 +1,15 @@
+<style>
+.demo-grid .mdl-cell {
+  box-sizing: border-box;
+  background-color: #BDBDBD;
+  height: 200px;
+  padding-left: 8px;
+  padding-top: 4px;
+  color: white;
+}
+.demo-grid .mdl-grid:first-of-type .mdl-cell {
+  height: 50px;
+}
+</style>
+
+{% include "grid.html" %}
diff --git a/node_modules/material-design-lite/src/grid/snippets/grid.html b/node_modules/material-design-lite/src/grid/snippets/grid.html
new file mode 100644
index 0000000..202a091
--- /dev/null
+++ b/node_modules/material-design-lite/src/grid/snippets/grid.html
@@ -0,0 +1,29 @@
+<div class="mdl-grid">
+  <div class="mdl-cell mdl-cell--1-col">1</div>
+  <div class="mdl-cell mdl-cell--1-col">1</div>
+  <div class="mdl-cell mdl-cell--1-col">1</div>
+  <div class="mdl-cell mdl-cell--1-col">1</div>
+  <div class="mdl-cell mdl-cell--1-col">1</div>
+  <div class="mdl-cell mdl-cell--1-col">1</div>
+  <div class="mdl-cell mdl-cell--1-col">1</div>
+  <div class="mdl-cell mdl-cell--1-col">1</div>
+  <div class="mdl-cell mdl-cell--1-col">1</div>
+  <div class="mdl-cell mdl-cell--1-col">1</div>
+  <div class="mdl-cell mdl-cell--1-col">1</div>
+  <div class="mdl-cell mdl-cell--1-col">1</div>
+</div>
+<div class="mdl-grid">
+  <div class="mdl-cell mdl-cell--4-col">4</div>
+  <div class="mdl-cell mdl-cell--4-col">4</div>
+  <div class="mdl-cell mdl-cell--4-col">4</div>
+</div>
+<div class="mdl-grid">
+  <div class="mdl-cell mdl-cell--6-col">6</div>
+  <div class="mdl-cell mdl-cell--4-col">4</div>
+  <div class="mdl-cell mdl-cell--2-col">2</div>
+</div>
+<div class="mdl-grid">
+  <div class="mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet">6 (8 tablet)</div>
+  <div class="mdl-cell mdl-cell--4-col mdl-cell--6-col-tablet">4 (6 tablet)</div>
+  <div class="mdl-cell mdl-cell--2-col mdl-cell--4-col-phone">2 (4 phone)</div>
+</div>