Using CSS columns rather than flexbox for submenu layout

greenpeace · Feb 8, 2019 · f67a7bf · f67a7bf
1 parent a17aab0
commit f67a7bf
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 9 deletions.
diff --git a/assets/scss/components/_submenu.scss b/assets/scss/components/_submenu.scss
@@ -84,15 +84,25 @@
     }
   }
 
-  &.submenu-long > ul > li {
-    @include large-and-up {
-      flex-basis: 50%;
+  @include large-and-up {
+    &.submenu-long,
+    &.submenu-short {
+      > ul {
+        display: block;
+
+        li {
+          margin: 0;
+          padding: 6px 0 0;
+        }
+      }
+    }
+
+    &.submenu-long {
+      columns: 2;
     }
-  }
 
-  &.submenu-short > ul > li {
-    @include large-and-up {
-      flex-basis: 33%;
+    &.submenu-short {
+      columns: 3;
     }
   }
 

diff --git a/style.css b/style.css
diff --git a/style.css.map b/style.css.map