style:增加响应式样式定义。

themes/grid/layout/partial/styles.ejs

@@ -3,3 +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)'}) %>

themes/grid/source/css/common.less

@@ -0,0 +1,97 @@
+.flex(@media) {
+    display: flex;
+    &.row-@{media} {
+        flex-direction: row;
+    }
+    &.row-@{media}-inv {
+        flex-direction: row-reverse;
+    }
+    &.col-@{media} {
+        flex-direction: column;
+    }
+    &.col-@{media}-inv {
+        flex-direction: column-reverse;
+    }
+    @main-axis-align: {
+        start: flex-start;
+        center: center;
+        end: flex-end;
+        space: space-around;
+        even: space-evenly;
+        between: space-between;
+        baseline: baseline;
+    }
+    each(@main-axis-align, {
+        &.rx-@{key}-@{media} {
+            justify-content: @value;
+        }
+        &.cy-@{key}-@{media} {
+            align-content: @value;
+        }
+    });
+    @aux-axis-align: {
+        start: flex-start;
+        center: center;
+        end: flex-end;
+        stretch: stretch;
+        baseline: baseline;
+    }
+    each(@aux-axis-align, {
+        &.ry-@{key}-@{media} {
+            align-items: @value;
+        }
+        .as-@{key}-@{media} {
+            align-self: @value;
+        }
+    });
+    each(range(1, 10), .(@i) {
+        &.extend-@{i}-@{media} {
+            flex-grow: @i;
+        }
+        &.shrink-@{i}-@{media} {
+            flex-shrink: @i;
+        }
+    });
+    @special-basis: {
+        fill: fill;
+        min: min-content;
+        max: max-content;
+        fit: fit-content;
+    };
+    each(@special-basis, {
+        &.w-@{key}-@{media} {
+            flex-basis: @value;
+        }
+    });
+    @basis-percent: 2, 3, 4, 5, 8, 10, 12, 16, 20, 24;
+    each(@basis-percent, .(@max) {
+        each(range(1, @max), .(@i) {
+            &.w-@{i}-@{max}-@{media} {
+                flex-basis: percentage(@i / @max);
+            }
+        });
+    });
+    @wrap-modes: {
+        none: nowrap;
+        wrap: wrap;
+        inv: wrap-reverse; 
+    }
+    each(@wrap-modes, {
+        &.w-@{key}-@{media} {
+            flex-wrap: @value;
+        }
+    })
+}
+
+.text-align(@media) {
+    @align: {
+        l: left; 
+        c: center;
+        r: right;
+    }
+    each(@align, {
+        .align-@{key}-@{media} {
+            text-align: @value;
+        }
+    })
+}

themes/grid/source/css/medium.less

@@ -0,0 +1,11 @@
+@import "common.less";
+
+.vin, .viw {
+    display: none;
+}
+.text {
+    .text-align(m);
+}
+.flex {
+    .flex(m);
+}

themes/grid/source/css/narrow.less

@@ -0,0 +1,12 @@
+@import "common.less";
+
+.vim, .viw {
+    display: none;
+}
+
+.text {
+    .text-align(n);
+}
+.flex {
+    .flex(n);
+}

themes/grid/source/css/wide.less

@@ -0,0 +1,11 @@
+@import "common.less";
+
+.vin, .vim {
+    display: none;
+}
+.text {
+    .text-align(w);
+}
+.flex {
+    .flex(w);
+}