diff --git a/components/layout/layout.tsx b/components/layout/layout.tsx
index 243fee086e..5f267507a9 100644
--- a/components/layout/layout.tsx
+++ b/components/layout/layout.tsx
@@ -6,6 +6,7 @@ import { ConfigContext } from '../config-provider';
 import { LayoutContext } from './context';
 import useHasSider from './hooks/useHasSider';
 import useStyle from './style';
+import useCSSVar from './style/cssVar';
 
 export interface GeneratorProps {
   suffixCls?: string;
@@ -83,7 +84,8 @@ const BasicLayout = React.forwardRef<HTMLDivElement, BasicPropsWithTagName>((pro
 
   const mergedHasSider = useHasSider(siders, children, hasSider);
 
-  const [wrapSSR, hashId] = useStyle(prefixCls);
+  const [, hashId] = useStyle(prefixCls);
+  const wrapCSSVar = useCSSVar(prefixCls);
   const classString = classNames(
     prefixCls,
     {
@@ -110,7 +112,7 @@ const BasicLayout = React.forwardRef<HTMLDivElement, BasicPropsWithTagName>((pro
     [],
   );
 
-  return wrapSSR(
+  return wrapCSSVar(
     <LayoutContext.Provider value={contextValue}>
       <Tag
         ref={ref}
diff --git a/components/layout/style/cssVar.ts b/components/layout/style/cssVar.ts
new file mode 100644
index 0000000000..1fb1c65c03
--- /dev/null
+++ b/components/layout/style/cssVar.ts
@@ -0,0 +1,4 @@
+import { genCSSVarRegister } from '../../theme/internal';
+import { prepareComponentToken } from '.';
+
+export default genCSSVarRegister('Layout', prepareComponentToken);
diff --git a/components/layout/style/index.ts b/components/layout/style/index.ts
index 7905a4be3d..4e70f89bf5 100644
--- a/components/layout/style/index.ts
+++ b/components/layout/style/index.ts
@@ -1,6 +1,6 @@
-import type { CSSObject } from '@ant-design/cssinjs';
+import { unit, type CSSObject } from '@ant-design/cssinjs';
 import type { CSSProperties } from 'react';
-import type { FullToken, GenerateStyle } from '../../theme/internal';
+import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
 import { genComponentStyleHook } from '../../theme/internal';
 import genLayoutLightStyle from './light';
 
@@ -181,7 +181,7 @@ const genLayoutStyle: GenerateStyle<LayoutToken, CSSObject> = (token) => {
           zIndex: 1,
           height: triggerHeight,
           color: triggerColor,
-          lineHeight: `${triggerHeight}px`,
+          lineHeight: unit(triggerHeight),
           textAlign: 'center',
           background: triggerBg,
           cursor: 'pointer',
@@ -196,7 +196,7 @@ const genLayoutStyle: GenerateStyle<LayoutToken, CSSObject> = (token) => {
           '&-trigger': {
             position: 'absolute',
             top: headerHeight,
-            insetInlineEnd: -zeroTriggerWidth,
+            insetInlineEnd: token.calc(zeroTriggerWidth).mul(-1).equal(),
             zIndex: 1,
             width: zeroTriggerWidth,
             height: zeroTriggerHeight,
@@ -227,7 +227,7 @@ const genLayoutStyle: GenerateStyle<LayoutToken, CSSObject> = (token) => {
             },
 
             '&-right': {
-              insetInlineStart: -zeroTriggerWidth,
+              insetInlineStart: token.calc(zeroTriggerWidth).mul(-1).equal(),
               borderStartStartRadius: borderRadius,
               borderStartEndRadius: 0,
               borderEndEndRadius: 0,
@@ -249,7 +249,7 @@ const genLayoutStyle: GenerateStyle<LayoutToken, CSSObject> = (token) => {
       height: headerHeight,
       padding: headerPadding,
       color: headerColor,
-      lineHeight: `${headerHeight}px`,
+      lineHeight: unit(headerHeight),
       background: headerBg,
 
       // Other components/menu/style/index.less line:686
@@ -277,48 +277,50 @@ const genLayoutStyle: GenerateStyle<LayoutToken, CSSObject> = (token) => {
   };
 };
 
+export const prepareComponentToken: GetDefaultToken<'Layout'> = (token) => {
+  const {
+    colorBgLayout,
+    controlHeight,
+    controlHeightLG,
+    colorText,
+    controlHeightSM,
+    marginXXS,
+    colorTextLightSolid,
+    colorBgContainer,
+  } = token;
+
+  const paddingInline = controlHeightLG * 1.25;
+
+  return {
+    // Deprecated
+    colorBgHeader: '#001529',
+    colorBgBody: colorBgLayout,
+    colorBgTrigger: '#002140',
+
+    bodyBg: colorBgLayout,
+    headerBg: '#001529',
+    headerHeight: controlHeight * 2,
+    headerPadding: `0 ${paddingInline}px`,
+    headerColor: colorText,
+    footerPadding: `${controlHeightSM}px ${paddingInline}px`,
+    footerBg: colorBgLayout,
+    siderBg: '#001529',
+    triggerHeight: controlHeightLG + marginXXS * 2,
+    triggerBg: '#002140',
+    triggerColor: colorTextLightSolid,
+    zeroTriggerWidth: controlHeightLG,
+    zeroTriggerHeight: controlHeightLG,
+    lightSiderBg: colorBgContainer,
+    lightTriggerBg: colorBgContainer,
+    lightTriggerColor: colorText,
+  };
+};
+
 // ============================== Export ==============================
 export default genComponentStyleHook(
   'Layout',
   (token) => [genLayoutStyle(token)],
-  (token) => {
-    const {
-      colorBgLayout,
-      controlHeight,
-      controlHeightLG,
-      colorText,
-      controlHeightSM,
-      marginXXS,
-      colorTextLightSolid,
-      colorBgContainer,
-    } = token;
-
-    const paddingInline = controlHeightLG * 1.25;
-
-    return {
-      // Deprecated
-      colorBgHeader: '#001529',
-      colorBgBody: colorBgLayout,
-      colorBgTrigger: '#002140',
-
-      bodyBg: colorBgLayout,
-      headerBg: '#001529',
-      headerHeight: controlHeight * 2,
-      headerPadding: `0 ${paddingInline}px`,
-      headerColor: colorText,
-      footerPadding: `${controlHeightSM}px ${paddingInline}px`,
-      footerBg: colorBgLayout,
-      siderBg: '#001529',
-      triggerHeight: controlHeightLG + marginXXS * 2,
-      triggerBg: '#002140',
-      triggerColor: colorTextLightSolid,
-      zeroTriggerWidth: controlHeightLG,
-      zeroTriggerHeight: controlHeightLG,
-      lightSiderBg: colorBgContainer,
-      lightTriggerBg: colorBgContainer,
-      lightTriggerColor: colorText,
-    };
-  },
+  prepareComponentToken,
   {
     deprecatedTokens: [
       ['colorBgBody', 'bodyBg'],