From aae80da887ac8ec5aea6051b9a291e6f86bf227c Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Wed, 9 Aug 2017 10:20:46 -0400
Subject: [PATCH] Add CSS grid example

---
 docs/grid-system.html      | 26 +++++++++++++++++++++++++-
 source/docs/grid-system.md | 35 ++++++++++++++++++++++++++++++++++-
 2 files changed, 59 insertions(+), 2 deletions(-)

diff --git a/docs/grid-system.html b/docs/grid-system.html
index cbc9e3c15..a051c34f6 100644
--- a/docs/grid-system.html
+++ b/docs/grid-system.html
@@ -48,7 +48,31 @@
     <div id="content">
       <h2 id="grid-system">Grid System</h2>
 <p>Shoelace doesn’t ship with a grid system because <a href="https://rachelandrew.co.uk/archives/2017/07/01/you-do-not-need-a-css-grid-based-grid-system/">you don’t need one</a>. You should use the <a href="https://gridbyexample.com/">CSS Grid Layout</a> instead.</p>
-<p>If you have an obligation to support older browsers, consider using the Bootstrap grid <a href="https://github.com/zirafa/bootstrap-grid-only">without any extras</a> in combination with Shoelace.</p>
+<p>This website uses the CSS Grid Layout. It’s really simple!</p>
+<pre><code class="lang-html">&lt;main id=&quot;wrap&quot;&gt;
+  &lt;nav id=&quot;nav&quot;&gt;
+    ...
+  &lt;/nav&gt;
+
+  &lt;div id=&quot;content&quot;&gt;
+    ...
+  &lt;/div&gt;
+&lt;/main&gt;
+</code></pre>
+<p>Now we just need a couple styles to turn the nav and content elements into columns. This will make the nav <code>12rem</code> wide and the content <code>100% - 12rem</code> so it fills the rest of the space.</p>
+<pre><code class="lang-css">#wrap {
+  display: grid;
+  grid-template-columns: 12rem calc(100% - 12rem);
+}
+</code></pre>
+<p>You can use media queries to make grids responsive. This is how we make the nav appear on top of the content on smaller screens.</p>
+<pre><code class="lang-css">@media (max-width: 60rem) {
+  #wrap {
+    display: block;
+  }
+}
+</code></pre>
+<p>Support for CSS Grid Layouts is <a href="http://caniuse.com/css-grid">very good</a>, but if you have an obligation to support older browsers, consider using the Bootstrap grid <a href="https://github.com/zirafa/bootstrap-grid-only">without any extras</a> in combination with Shoelace.</p>
 
     </div>
   </main>
diff --git a/source/docs/grid-system.md b/source/docs/grid-system.md
index 115cd3691..459671a3f 100644
--- a/source/docs/grid-system.md
+++ b/source/docs/grid-system.md
@@ -8,4 +8,37 @@ description: Shoelace doesn’t ship with a grid system because you don’t need
 
 Shoelace doesn’t ship with a grid system because [you don’t need one](https://rachelandrew.co.uk/archives/2017/07/01/you-do-not-need-a-css-grid-based-grid-system/). You should use the [CSS Grid Layout](https://gridbyexample.com/) instead.
 
-If you have an obligation to support older browsers, consider using the Bootstrap grid [without any extras](https://github.com/zirafa/bootstrap-grid-only) in combination with Shoelace.
+This website uses the CSS Grid Layout. It’s really simple!
+
+```html
+<main id="wrap">
+  <nav id="nav">
+    ...
+  </nav>
+
+  <div id="content">
+    ...
+  </div>
+</main>
+```
+
+Now we just need a couple styles to turn the nav and content elements into columns. This will make the nav `12rem` wide and the content `100% - 12rem` so it fills the rest of the space.
+
+```css
+#wrap {
+  display: grid;
+  grid-template-columns: 12rem calc(100% - 12rem);
+}
+```
+
+You can use media queries to make grids responsive. This is how we make the nav appear on top of the content on smaller screens.
+
+```css
+@media (max-width: 60rem) {
+  #wrap {
+    display: block;
+  }
+}
+```
+
+Support for CSS Grid Layouts is [very good](http://caniuse.com/css-grid), but if you have an obligation to support older browsers, consider using the Bootstrap grid [without any extras](https://github.com/zirafa/bootstrap-grid-only) in combination with Shoelace.