diff --git a/themes/grid/layout/archive.ejs b/themes/grid/layout/archive.ejs
index eac61f3..b3a77f9 100644
--- a/themes/grid/layout/archive.ejs
+++ b/themes/grid/layout/archive.ejs
@@ -1,5 +1,5 @@
-<div class="uk-flex mx-2 my-2 main-content">
-    <section class="uk-width-3-4 px-1">
+<div class="flex mx-2 my-2 main-content">
+    <section class="w-3-4-a w-2-2-n w-2-2-m px-1">
         <% if (!is_month()) { %>
         <div class="uk-card uk-card-default uk-card-body uk-height-1-1">
             <%- list_archives({type: 'monthly', order: '1', show_count: true, format: 'YYYY年MM月'}) %>
@@ -8,7 +8,7 @@
         <%- partial('partial/post/list', {start: 1}) %>
         <% } %>
     </section>
-    <section class="uk-width-1-4">
+    <section class="w-1-4-a flex col-a hin him">
         <%- partial('partial/side', {'noCategories': false, 'noTags': false}) %>
     </section>
 </div>
diff --git a/themes/grid/layout/categories-list.ejs b/themes/grid/layout/categories-list.ejs
index e75ed83..33636c6 100644
--- a/themes/grid/layout/categories-list.ejs
+++ b/themes/grid/layout/categories-list.ejs
@@ -1,10 +1,10 @@
-<div class="uk-flex mx-2 my-2 main-content">
-    <section class="uk-width-3-4 px-1">
+<div class="flex mx-2 my-2 main-content">
+    <section class="w-3-4-a w-2-2-n w-2-2-m px-1">
         <div class="uk-card uk-card-default uk-card-body uk-height-1-1">
             <%- list_categories({orderby: 'name', order: '1', show_count: true, class: "categories-toc"}) %>
         </div>
     </section>
-    <section class="uk-width-1-4">
+    <section class="w-1-4-a flex col-a hin him">
         <%- partial('partial/side', {'noCategories': true, 'noTags': false}) %>
     </section>
 </div>
diff --git a/themes/grid/layout/category.ejs b/themes/grid/layout/category.ejs
index 985917f..109039c 100644
--- a/themes/grid/layout/category.ejs
+++ b/themes/grid/layout/category.ejs
@@ -1,8 +1,8 @@
-<div class="uk-flex mx-2 my-2 main-content">
-    <section class="uk-width-3-4 px-1">
+<div class="flex mx-2 my-2 main-content">
+    <section class="w-3-4-a w-2-2-n w-2-2-m px-1">
         <%- partial('partial/post/list', {start: 1}) %>
         <% if (page.total > 1) { %>
-        <div class="uk-flex uk-flex-between p-1">
+        <div class="flex rx-between-a p-1">
             <a class="<% if (page.prev == 0) { %>uk-disabled<% } %>"
                 href="/<%- page.prev_link %>"
                 uk-slidenav-previous></a>
@@ -13,7 +13,7 @@
         </div>
         <% } %>
     </section>
-    <section class="uk-width-1-4">
+    <section class="w-1-4-a flex col-a hin him">
         <%- partial('partial/side', {'noCategories': true, 'noTags': false}) %>
     </section>
 </div>
diff --git a/themes/grid/layout/index.ejs b/themes/grid/layout/index.ejs
index 9e51f80..d6dae87 100644
--- a/themes/grid/layout/index.ejs
+++ b/themes/grid/layout/index.ejs
@@ -1,8 +1,8 @@
-<div class="uk-flex mx-2 my-2 main-content">
-    <section class="uk-width-3-4 px-1">
+<div class="flex mx-2 my-2 main-content">
+    <section class="w-3-4-a w-2-2-m px-1 extend-1-a">
         <%- partial('partial/post/list', {start: 1}) %>
         <% if (page.total > 1) { %>
-        <div class="uk-flex uk-flex-between p-1">
+        <div class="flex rx-between-a p-1">
             <a class="<% if (page.prev == 0) { %>uk-disabled<% } %>"
                 href="/<%- page.prev_link %>"
                 uk-slidenav-previous></a>
@@ -13,7 +13,7 @@
         </div>
         <% } %>
     </section>
-    <section class="uk-width-1-4">
+    <section class="w-1-4-a flex col-a hin him">
         <%- partial('partial/side', {'noCategories': false, 'noTags': false}) %>
     </section>
 </div>
diff --git a/themes/grid/layout/partial/footer.ejs b/themes/grid/layout/partial/footer.ejs
index 2c09a77..a8b817a 100644
--- a/themes/grid/layout/partial/footer.ejs
+++ b/themes/grid/layout/partial/footer.ejs
@@ -1,16 +1,15 @@
-<footer class="uk-flex uk-flex-row uk-flex-between uk-flex-center py-2 px-2">
-    <div class="uk-width-1-3 uk-text-small">
-        <p class="m-0">Powered by <%- link_to("http://hexo.io/", "Hexo" , {external: true})%>
-        </p>
-        <p class="uk-text-meta m-0">Theme Grid by FarDawn.</p>
+<footer class="flex row-w col-n rx-between-a ry-center-a py-2 px-2">
+    <div class="b-1-3-a uk-text-small flex col-a hin him">
+        <div class="m-0">Powered by <%- link_to("http://hexo.io/", "Hexo" , {external: true})%></div>
+        <div class="uk-text-meta m-0">Theme Grid by FarDawn.</div>
     </div>
-    <div class="uk-width-1-3 uk-text-small uk-text-center">
+    <div class="b-1-3-a w-2-2-n uk-text-small text align-c-a align-l-m extend-1-m">
         <p class="m-0">&copy; ArchGrid, since 2021.</p>
         <p class="m-0">Proudly presents by FarDawn.</p>
     </div>
-    <div class="uk-width-1-3 uk-text-small uk-text-right">
+    <div class="b-1-3-a w-2-2-n uk-text-small text align-r-a align-c-n extend-1-m">
         <p class="m-0"><a href="https://beian.miit.gov.cn">冀ICP备2021008151号-1</a></p>
-        <p class="m-0 uk-flex uk-flex-row uk-flex-right uk-flex-middle">
+        <p class="m-0 flex row-a rx-end-a rx-center-n ry-center-a">
             <a target="_blank"
                href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=13010402002063">
                 <img src="/images/beian.png">
diff --git a/themes/grid/layout/partial/header.ejs b/themes/grid/layout/partial/header.ejs
index 527bd30..18ebaaf 100644
--- a/themes/grid/layout/partial/header.ejs
+++ b/themes/grid/layout/partial/header.ejs
@@ -4,7 +4,8 @@
         <span class="uk-navbar-item">用碎片化的时间收集碎片化的知识</span>
     </div>
     <div class="uk-navbar-right">
-        <ul class="uk-navbar-nav">
+        <a href="#" class="uk-navbar-toggle hiw" uk-navbar-toggle-icon uk-toggle="target: #off-menu"></a>
+        <ul class="uk-navbar-nav hin him">
             <% if (!is_home()) { %>
             <li><a href="/index.html">返回首页</a></li>
             <% } %>
@@ -14,3 +15,19 @@
         </ul>
     </div>
 </nav>
+<div id="off-menu" class="offcanvas-menu" uk-offcanvas="flip: true; mode: push; overlay: true">
+    <div class="uk-offcanvas-bar">
+        <button class="uk-offcanvas-close" type="button" uk-close></button>
+        <div class="uk-card uk-card-small uk-card-default uk-card-body mt-4 mb-2">
+            <ul class="uk-nav-default hiw" uk-nav>
+                <% if (!is_home()) { %>
+                <li><a href="/index.html">返回首页</a></li>
+                <% } %>
+                <li<% if (is_current('/categories')) { %> class="uk-active"<% } %>><a href="/categories">知识分类</a></li>
+                <li<% if (is_current('/tags')) { %> class="uk-active"<% } %>><a href="/tags">知识标签</a></li>
+                <li<% if (is_archive()) { %> class="uk-active"<% } %>><a href="/archives">归档文章</a></li>
+            </ul>
+        </div>
+        <%- partial('partial/side', {'noCategories': false, 'noTags' : false}) %>
+    </div>
+</div>
\ No newline at end of file
diff --git a/themes/grid/layout/partial/post/list.ejs b/themes/grid/layout/partial/post/list.ejs
index f92cb5c..fceca86 100644
--- a/themes/grid/layout/partial/post/list.ejs
+++ b/themes/grid/layout/partial/post/list.ejs
@@ -6,7 +6,7 @@
                     <%= post.title %>
                 </a>
             </h3>
-            <div class="uk-flex uk-flex-left">
+            <div class="flex row-a col-n rx-start-a">
                 <div class="uk-text-meta mr-1">最后更新：<%= date(post.date, "YYYY-MM-DD HH:mm" ) %>
                 </div>
                 <% if (post.categories.length> 0) { %>
@@ -18,25 +18,25 @@
                             separator: ' / '
                             }) %>
                     </div>
-                    <% } %>
+                <% } %>
             </div>
         </div>
         <% if (post.excerpt) { %>
             <div class="uk-card-body">
                 <%- post.excerpt %>
             </div>
-            <% } %>
-                <% if (post.tags.length> 0) { %>
-                    <div class="uk-card-footer uk-flex uk-flex-left">
-                        <div class="tag-title">分类标签：</div>
-                        <div class="uk-flex uk-flex-left uk-flex-wrap uk-flex-1">
-                            <% post.tags.each(function(tag) { %>
-                                <span class="uk-label ml-1 mb-1 <% if (is_tag(tag.name)) { %>uk-label-warning<% } %>">
-                                    <%= tag.name %>
-                                </span>
-                                <% }) %>
-                        </div>
-                    </div>
-                    <% } %>
+        <% } %>
+        <% if (post.tags.length> 0) { %>
+            <div class="uk-card-footer flex row-a rx-start-a hin">
+                <div class="tag-title">分类标签：</div>
+                <div class="flex row-a rx-start-a w-wrap-a extend-1-a">
+                    <% post.tags.each(function(tag) { %>
+                        <span class="uk-label ml-1 mb-1 <% if (is_tag(tag.name)) { %>uk-label-warning<% } %>">
+                            <%= tag.name %>
+                        </span>
+                    <% }) %>
+                </div>
+            </div>
+        <% } %>
     </div>
-    <% }) %>
\ No newline at end of file
+<% }) %>
\ No newline at end of file
diff --git a/themes/grid/layout/partial/styles.ejs b/themes/grid/layout/partial/styles.ejs
index 820efae..fd63387 100644
--- a/themes/grid/layout/partial/styles.ejs
+++ b/themes/grid/layout/partial/styles.ejs
@@ -3,6 +3,6 @@
 <%- css(['css/prism.css']) %>
 <%- css(['css/theme.css']) %>
 <%- css(['css/style.css']) %>
-<%- css({href: 'css/narrow.css', media: 'screen and (max-width: 600px)'}) %>
-<%- css({href: 'css/medium.css', media: 'screen and (min-width: 601px) and (max-width: 900px)'}) %>
-<%- css({href: 'css/wide.css', media: 'screen and (min-width: 901px)'}) %>
\ No newline at end of file
+<%- css({href: 'css/narrow.css', media: 'screen and (max-width: 640px)'}) %>
+<%- css({href: 'css/medium.css', media: 'screen and (min-width: 641px) and (max-width: 960px)'}) %>
+<%- css({href: 'css/wide.css', media: 'screen and (min-width: 961px)'}) %>
\ No newline at end of file
diff --git a/themes/grid/layout/post.ejs b/themes/grid/layout/post.ejs
index 1a99da3..082d466 100644
--- a/themes/grid/layout/post.ejs
+++ b/themes/grid/layout/post.ejs
@@ -1,14 +1,14 @@
-<div class="uk-flex mx-2 my-2 main-content">
-    <section class="uk-width-3-4 px-1">
+<div class="flex mx-2 my-2 main-content">
+    <section class="w-3-4-a w-2-2-n w-2-2-m px-1">
         <div class="uk-card uk-card-default uk-card-small uk-width-1-1 mb-2">
             <div class="uk-card-header">
-                <h3 class="uk-card-title uk-flex uk-flex-left uk-flex-middle">
+                <h3 class="uk-card-title flex row-a rx-start-a ry-center-a">
                     <a href="javascript:history.go(-1)" uk-icon="icon: chevron-left" uk-tooltip="后退到上一个页面"></a>
                     <span class="ml-1">
                         <%= page.title %>
                     </span>
                 </h3>
-                <div class="uk-flex uk-flex-left">
+                <div class="flex row-w row-m col-n rx-start-a">
                     <div class="uk-text-meta mr-1">最后更新：<%= date(page.date, "YYYY-MM-DD HH:mm" ) %>
                     </div>
                     <% if (page.categories.length> 0) { %>
@@ -27,9 +27,9 @@
                 <%- page.content %>
             </article>
             <% if (page.tags.length> 0) { %>
-                <div class="uk-card-footer uk-flex uk-flex-left">
+                <div class="uk-card-footer flex rx-start-a">
                     <div class="tag-title">分类标签：</div>
-                    <div class="uk-flex uk-flex-left uk-flex-wrap uk-flex-1 tag-host">
+                    <div class="flex rx-flex-a extend-1-a w-wrap-a tag-host">
                         <% page.tags.each(function(tag) { %>
                             <span class="uk-label ml-1 mb-1">
                                 <%= tag.name %>
@@ -40,7 +40,7 @@
                 <% } %>
         </div>
     </section>
-    <section class="uk-width-1-4">
+    <section class="w-1-4-a hin him">
         <%- partial('partial/side', {'noCategories': false, 'noTags' : false}) %>
     </section>
 </div>
\ No newline at end of file
diff --git a/themes/grid/layout/tag.ejs b/themes/grid/layout/tag.ejs
index eebc86f..bfaefcd 100644
--- a/themes/grid/layout/tag.ejs
+++ b/themes/grid/layout/tag.ejs
@@ -1,8 +1,8 @@
-<div class="uk-flex mx-2 my-2 main-content">
-    <section class="uk-width-3-4 px-1">
+<div class="flex mx-2 my-2 main-content">
+    <section class="w-3-4-a w-2-2-n w-2-2-m px-1">
         <%- partial('partial/post/list', {start: 1}) %>
         <% if (page.total > 1) { %>
-        <div class="uk-flex uk-flex-between p-1">
+        <div class="flex row-a rx-between-a p-1">
             <a class="<% if (page.prev == 0) { %>uk-disabled<% } %>"
                 href="/<%- page.prev_link %>"
                 uk-slidenav-previous></a>
@@ -13,7 +13,7 @@
         </div>
         <% } %>
     </section>
-    <section class="uk-width-1-4">
+    <section class="w-1-4-a flex col-a hin him">
         <%- partial('partial/side', {'noCategories': false, 'noTags': true}) %>
     </section>
 </div>
diff --git a/themes/grid/layout/tags-list.ejs b/themes/grid/layout/tags-list.ejs
index bbe52b1..e47d397 100644
--- a/themes/grid/layout/tags-list.ejs
+++ b/themes/grid/layout/tags-list.ejs
@@ -1,10 +1,10 @@
-<div class="uk-flex mx-2 my-2 main-content">
-    <section class="uk-width-3-4 px-1">
+<div class="flex mx-2 my-2 main-content">
+    <section class="w-3-4-a w-2-2-n w-2-2-m px-1">
         <div class="uk-card uk-card-default uk-card-body uk-height-1-1">
             <%- list_tags({orderby: 'name', order: '1', show_count: true, class: "tags-toc"}) %>
         </div>
     </section>
-    <section class="uk-width-1-4">
+    <section class="w-1-4-a flex col-a hin him">
         <%- partial('partial/side', {'noCategories': false, 'noTags': true}) %>
     </section>
 </div>