diff --git a/src/_util/dom.ts b/src/_util/dom.ts
index 65865a9b8..f8c609ef3 100644
--- a/src/_util/dom.ts
+++ b/src/_util/dom.ts
@@ -202,13 +202,22 @@ export const getAttach = (node: any): HTMLElement => {
 };
 
 // 获取 css vars
-export const getCssVarsValue = (name: string, element?: HTMLElement) => {
-  if (!canUseDocument) return;
+export const getCssVarsValue = (name: string, element?: HTMLElement): string | undefined => {
+  if (!canUseDocument) return undefined;
 
   const el = element || document.documentElement;
   return getComputedStyle(el).getPropertyValue(name);
 };
 
+export const getCssVarsValueFormat = <T = any>(
+  name: string,
+  element?: HTMLElement,
+  format?: (value?: string) => T,
+): T | undefined => {
+  const value = getCssVarsValue(name, element);
+  return format ? format(value) : undefined;
+};
+
 /**
  * 检查元素是否在父元素视图
  * http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport
diff --git a/src/grid/Row.tsx b/src/grid/Row.tsx
index 2e93cd56d..e6f2cf8c4 100644
--- a/src/grid/Row.tsx
+++ b/src/grid/Row.tsx
@@ -4,7 +4,7 @@ import isObject from 'lodash/isObject';
 import useConfig from '../hooks/useConfig';
 import { StyledProps } from '../common';
 import { TdRowProps } from './type';
-import { canUseDocument, getCssVarsValue } from '../_util/dom';
+import { canUseDocument, getCssVarsValueFormat } from '../_util/dom';
 import { rowDefaultProps } from './defaultProps';
 import useDefaultProps from '../hooks/useDefaultProps';
 
@@ -19,11 +19,21 @@ export interface RowProps extends TdRowProps, StyledProps {
 }
 
 const calcSize = (width: number) => {
-  const smWidth = getCssVarsValue('--td-screen-sm') || 768;
-  const mdWidth = getCssVarsValue('--td-screen-md') || 992;
-  const lgWidth = getCssVarsValue('--td-screen-lg') || 1200;
-  const xlWidth = getCssVarsValue('--td-screen-xl') || 1400;
-  const xxlWidth = getCssVarsValue('--td-screen-xxl') || 1880;
+  const smWidth = getCssVarsValueFormat<number>('--td-screen-sm', undefined, (val?: string) =>
+    val ? Number.parseFloat(val) : 768,
+  );
+  const mdWidth = getCssVarsValueFormat<number>('--td-screen-md', undefined, (val?: string) =>
+    val ? Number.parseFloat(val) : 992,
+  );
+  const lgWidth = getCssVarsValueFormat<number>('--td-screen-lg', undefined, (val?: string) =>
+    val ? Number.parseFloat(val) : 1200,
+  );
+  const xlWidth = getCssVarsValueFormat<number>('--td-screen-xl', undefined, (val?: string) =>
+    val ? Number.parseFloat(val) : 1400,
+  );
+  const xxlWidth = getCssVarsValueFormat<number>('--td-screen-xxl', undefined, (val?: string) =>
+    val ? Number.parseFloat(val) : 1880,
+  );
 
   let size = 'xs';
   if (width >= xxlWidth) {