diff --git a/themes/grid/source/css/common.less b/themes/grid/source/css/common.less
index 17e696b..8848df2 100644
--- a/themes/grid/source/css/common.less
+++ b/themes/grid/source/css/common.less
@@ -45,22 +45,21 @@
         }
     });
     each(range(1, 10), .(@i) {
-        &.extend-@{i}-@{media} {
+        .extend-@{i}-@{media} {
             flex-grow: @i;
         }
-        &.shrink-@{i}-@{media} {
+        .shrink-@{i}-@{media} {
             flex-shrink: @i;
         }
     });
-    @special-basis: {
-        fill: fill;
+    @special-width: {
         min: min-content;
         max: max-content;
         fit: fit-content;
     };
-    each(@special-basis, {
-        .b-@{key}-@{media} {
-            flex-basis: @value;
+    each(@special-width, {
+        .w-@{key}-@{media} {
+            width: @value;
         }
     });
     @basis-percent: 2, 3, 4, 5, 8, 10, 12, 16, 20, 24;
diff --git a/themes/grid/source/css/medium.less b/themes/grid/source/css/medium.less
index 43af02c..48aa151 100644
--- a/themes/grid/source/css/medium.less
+++ b/themes/grid/source/css/medium.less
@@ -1,11 +1,19 @@
 @import "common.less";
 
-.vin, .viw {
-    display: none;
+.him {
+    display: none !important;
 }
+
 .text {
     .text-align(m);
 }
 .flex {
     .flex(m);
+}
+
+.offcanvas-menu {
+    max-width: max-content;
+}
+.tags-toc-list .tags-toc-list-item {
+    width: 40%;
 }
\ No newline at end of file
diff --git a/themes/grid/source/css/narrow.less b/themes/grid/source/css/narrow.less
index 1798185..e25f759 100644
--- a/themes/grid/source/css/narrow.less
+++ b/themes/grid/source/css/narrow.less
@@ -1,7 +1,7 @@
 @import "common.less";
 
-.vim, .viw {
-    display: none;
+.hin {
+    display: none !important;
 }
 
 .text {
@@ -9,4 +9,11 @@
 }
 .flex {
     .flex(n);
+}
+
+.offcanvas-menu {
+    max-width: max-content;
+}
+.tags-toc-list .tags-toc-list-item {
+    width: 90%;
 }
\ No newline at end of file
diff --git a/themes/grid/source/css/style.less b/themes/grid/source/css/style.less
index 12ca201..e56535e 100644
--- a/themes/grid/source/css/style.less
+++ b/themes/grid/source/css/style.less
@@ -24,7 +24,8 @@ footer {
     align-items: center;
 }
 .tag-title {
-    min-width: 100px;
+    width: max-content;
+    word-break: keep-all;
 }
 .category-list, .category-list-child {
     padding-left: 8px;
@@ -84,11 +85,13 @@ footer {
     flex-wrap: wrap;
     .tags-toc-list-item {
         width: 25%;
+        flex-grow: 1;
         display: flex;
         flex-direction: row;
         justify-content: space-between;
         align-items: center;
         padding: 16px;
+        margin: 0 8px;
         border-bottom: 1px solid #cccccc;
         .tags-toc-list-link {
             flex-grow: 1;
diff --git a/themes/grid/source/css/theme.less b/themes/grid/source/css/theme.less
index 0de57ea..d44a47a 100644
--- a/themes/grid/source/css/theme.less
+++ b/themes/grid/source/css/theme.less
@@ -1,6 +1,10 @@
 @import "node_modules/uikit/src/less/uikit.theme.less";
+@import "node_modules/uikit/src/less/components/variables.less";
 @import "common.less";
 
+@offcanvas-bar-color-mode: dark;
+@global-secondary-background: #f8f8f8;
+
 @directions: {
     t: top;
     b: bottom;
diff --git a/themes/grid/source/css/wide.less b/themes/grid/source/css/wide.less
index dda2dec..c84d8fd 100644
--- a/themes/grid/source/css/wide.less
+++ b/themes/grid/source/css/wide.less
@@ -1,11 +1,16 @@
 @import "common.less";
 
-.vin, .vim {
-    display: none;
+.hiw {
+    display: none !important;
 }
+
 .text {
     .text-align(w);
 }
 .flex {
     .flex(w);
+}
+
+.offcanvas-menu {
+    max-width: max-content;
 }
\ No newline at end of file