From 046a98267b19584188ebd1141494048cf100f41b Mon Sep 17 00:00:00 2001
From: Angelos Chalaris <a.chalaris@skroutz.gr>
Date: Wed, 16 Sep 2020 18:54:56 +0300
Subject: [PATCH] Add responsive layout with sidebar

---
 snippets/responsive-layout-sidebar.md | 42 +++++++++++++++++++++++++++
 1 file changed, 42 insertions(+)
 create mode 100644 snippets/responsive-layout-sidebar.md

diff --git a/snippets/responsive-layout-sidebar.md b/snippets/responsive-layout-sidebar.md
new file mode 100644
index 000000000..8bf39e598
--- /dev/null
+++ b/snippets/responsive-layout-sidebar.md
@@ -0,0 +1,42 @@
+---
+title: Responsive layout with sidebar
+tags: layout,intermediate
+---
+
+Creates a responsive layout with a content area and a sidebar.
+
+- Use `display: grid` on the parent container, to create a grid layout.
+- Use `minmax()` for the second column (sidebar) to allow it to take up between `150px` and `20%`.
+- Use `1fr` for the first column (main content) to take up the rest of the remaining space.
+
+```html
+<div class="container">
+  <main>
+    This element is 1fr large.
+  </main>
+  <aside>
+    Min: 150px / Max: 20%
+  </aside>
+</div>
+```
+
+```css
+.container {
+  display: grid;
+  grid-template-columns: 1fr minmax(150px, 20%);
+  height: 100px;
+}
+
+main, aside {
+  padding: 12px;
+  text-align: center;
+}
+
+main {
+  background: #d4f2c4;
+}
+
+aside {
+  background: #81cfd9;
+}
+```