From f5656d0b7a28df8b58a8535b213c55c130f32064 Mon Sep 17 00:00:00 2001
From: Eric Tian <tianxing0923@qq.com>
Date: Fri, 8 Mar 2019 11:04:06 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8DGrid=E6=A0=85=E6=A0=BC?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6Col=E5=B1=9E=E6=80=A7xl=E5=92=8Cxxl=E6=97=A0?=
 =?UTF-8?q?=E6=95=88=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/grid/col.vue   |  6 ++++--
 src/styles/common/layout.less | 20 +++++++++++++++++++-
 types/grid.d.ts               | 18 +++++++++++++-----
 3 files changed, 36 insertions(+), 8 deletions(-)

diff --git a/src/components/grid/col.vue b/src/components/grid/col.vue
index 959b6923..4695c42d 100644
--- a/src/components/grid/col.vue
+++ b/src/components/grid/col.vue
@@ -19,7 +19,9 @@
             xs: [Number, Object],
             sm: [Number, Object],
             md: [Number, Object],
-            lg: [Number, Object]
+            lg: [Number, Object],
+            xl: [Number, Object],
+            xxl: [Number, Object]
         },
         data () {
             return {
@@ -40,7 +42,7 @@
                     }
                 ];
 
-                ['xs', 'sm', 'md', 'lg'].forEach(size => {
+                ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].forEach(size => {
                     if (typeof this[size] === 'number') {
                         classList.push(`${prefixCls}-span-${size}-${this[size]}`);
                     } else if (typeof this[size] === 'object') {
diff --git a/src/styles/common/layout.less b/src/styles/common/layout.less
index b57119a6..db19735f 100644
--- a/src/styles/common/layout.less
+++ b/src/styles/common/layout.less
@@ -81,8 +81,26 @@
 
 // Large grid
 //
-// Columns, offsets, pushes, and pulls for the large desktop device range.
+// Columns, offsets, pushes, and pulls for the wide desktop device range.
 
 @media (min-width: @screen-lg-min) {
     .make-grid(-lg);
 }
+
+
+// Extra large grid
+//
+// Columns, offsets, pushes, and pulls for the full hd desktop device range.
+
+@media (min-width: @screen-xl-min) {
+    .make-grid(-xl);
+}
+
+
+// Extra extra large grid
+//
+// Columns, offsets, pushes, and pulls for the large desktop device range.
+
+@media (min-width: @screen-xxl-min) {
+    .make-grid(-xxl);
+}
diff --git a/types/grid.d.ts b/types/grid.d.ts
index ac071a44..cfcac4cb 100644
--- a/types/grid.d.ts
+++ b/types/grid.d.ts
@@ -54,19 +54,27 @@ export declare interface Col extends Vue {
    */
   'class-name'?: string;
   /**
-   * <768px 响应式栅格，可为栅格数或一个包含其他属性的对象
+   * <576px 响应式栅格，可为栅格数或一个包含其他属性的对象
    */
   xs?: number | object;
   /**
-   * ≥768px 响应式栅格，可为栅格数或一个包含其他属性的对象
+   * ≥576px 响应式栅格，可为栅格数或一个包含其他属性的对象
    */
   sm?: number | object;
   /**
-   * ≥992px 响应式栅格，可为栅格数或一个包含其他属性的对象
+   * ≥768px 响应式栅格，可为栅格数或一个包含其他属性的对象
    */
   md?: number | object;
   /**
-   * ≥1200px 响应式栅格，可为栅格数或一个包含其他属性的对象
+   * ≥992px 响应式栅格，可为栅格数或一个包含其他属性的对象
    */
   lg?: number | object;
-}
\ No newline at end of file
+  /**
+   * ≥1200px 响应式栅格，可为栅格数或一个包含其他属性的对象
+   */
+  xl?: number | object;
+  /**
+   * ≥1600px 响应式栅格，可为栅格数或一个包含其他属性的对象
+   */
+  xxl?: number | object;
+}