Add responsive grid layout

1 files changed, 22 insertions, 0 deletions

diff --git a/source/_assets/sass/_blog.scss b/source/_assets/sass/_blog.scss
index e69de29..c54a038 100644
--- a/source/_assets/sass/_blog.scss
+++ b/source/_assets/sass/_blog.scss
@@ -0,0 +1,22 @@
+#main-sidebar-container {
+  display: grid;
+  grid-template-columns: auto;
+  grid-template-areas: "main" "sidebar";
+  grid-row-gap: 1rem;
+}
+
+#main-sidebar-container article {
+  grid-area: main;
+}
+
+#main-sidebar-container aside {
+  grid-area: sidebar;
+}
+
+@media (min-width: 1024px) {
+  #main-sidebar-container {
+    grid-template-columns: 224px auto;
+    grid-template-areas: "sidebar main";
+    grid-column-gap: 1rem;
+  }
+}