start using CSS grid for sidebar implementation

Author: mansona

addon/styles/sidebar-container.css

@@ -1,32 +1,27 @@
+:root {
+  --sidebar-width: 16rem;
+}
+
 .sidebar-container {
-  display: flex;
+  display: grid;
+  grid-gap: 2rem;
+  grid-template-columns: var(--sidebar-width) minmax(0, 1fr) var(--sidebar-width);
   margin: auto;
   max-width: var(--container-width);
   padding: var(--spacing-6) var(--grid-margin);
 }
 
+.sidebar-container > *:not(.es-sidebar):not(.es-sidebar-toggle) {
+  grid-column: 1 / span 2;
+}
+
+.sidebar-container > .es-sidebar + .es-sidebar-toggle + * {
+  grid-column: 2 / span 2;
+}
+
 @media (max-width: 768px) {
   .sidebar-container {
     display: block;
     padding: var(--spacing-4) var(--grid-margin);
   }
 }
-
-@media (min-width: 769px) {
-  .sidebar-container > .es-sidebar {
-    width: 16rem;
-    margin-right: 2rem;
-    flex-grow: 0;
-    flex-shrink: 0;
-  }
-
-  .sidebar-container > *:not(.es-sidebar):not(.es-sidebar-toggle) {
-    flex-grow: 1;
-  }
-
-  .sidebar-container > * + .es-sidebar {
-    order: 999;
-    margin-right: unset;
-    margin-left: 2rem;
-  }
-}