fix: 修复嵌套 container 宽度计算错乱逻辑 (#652)

修复两种类型的 gap 嵌套使用导致 grid 宽度意外减去了 gap 的问题

Co-authored-by: Jack <[email protected]>

packages/components/src/components/grid/index.tsx

@@ -44,6 +44,7 @@ const Grid: React.FC<GridProps> = (props: React.PropsWithChildren<GridProps>) =>
       data-collapse={collapse}
       data-gap={!!gap}
       data-container={!!container}
+      data-full={isNumber(span) && (span as number) >= 12}
       style={{ ...cssProps, ...style }}
     >
       {children}

packages/components/src/components/grid/style/index.less

@@ -12,32 +12,37 @@
   box-sizing: border-box;
 
   --gio-grid-gap-size: calc(var(--gio-grid-gap, 0) * 8px);
+  --gio-grid-gap-bias: 1;
 
   &[data-container='true'] {
     position: relative;
     width: 100%;
   }
 
+  &[data-full='true'] {
+    --gio-grid-gap-bias: 0;
+  }
+
   .normal-gap {
-    width: calc(100% * var(--gio-grid-span) / 12 - var(--gio-grid-gap-size));
+    width: calc(100% * var(--gio-grid-span) / 12 - (var(--gio-grid-gap-bias) * var(--gio-grid-gap-size)));
 
-    &[data-gap='true'] {
-      > * {
-        --gio-grid-item-marign: calc(var(--gio-grid-gap-size) / 2);
-        margin: var(--gio-grid-item-marign);
+    &[data-gap='true'][data-collapse='false'] {
+      > [data-gap] {
+        --gio-grid-item-marign: calc(var(--gio-grid-gap-bias) * var(--gio-grid-gap-size) / 2);
+        margin: calc(var(--gio-grid-gap-bias) * var(--gio-grid-item-marign));
       }
     }
   }
 
   .css-grid-gap {
     gap: var(--gio-grid-gap-size);
-    width: calc((100% + var(--gio-grid-gap-size)) / 12 * var(--gio-grid-span) - var(--gio-grid-gap-size));
+    width: calc(
+      (100% + var(--gio-grid-gap-size)) / 12 * var(--gio-grid-span) -
+        (var(--gio-grid-gap-bias) * var(--gio-grid-gap-size))
+    );
 
     &[data-gap='true'] {
       --gio-grid-item-marign: unset;
-      // > * {
-      //   margin: unset !important;
-      // }
     }
   }
 

packages/website/src/components/basic/grid/demo/nested-container.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Grid } from '@gio-design/components';
+
+import '@gio-design/components/es/components/grid/style/index.css';
+import './style.less';
+
+const Base = (): JSX.Element => {
+  return (
+    <Grid className="demo">
+      <Grid span={12}>span=12</Grid>
+      <Grid container span={12} gap={1}>
+        <Grid span={3}>span=3</Grid>
+        <Grid container span={9} gap={1}>
+          <Grid span={6}>span=6</Grid>
+          <Grid span={6}>span=6</Grid>
+        </Grid>
+      </Grid>
+    </Grid>
+  );
+};
+
+export default Base;

packages/website/src/components/basic/grid/index.zh-CN.md

@@ -26,9 +26,12 @@ group:
 
 打开控制台，查看元素，Demo 的 calssName 前缀应该已经替换成了 `cool`。对应的 less 变量也替换了。
 
+## 嵌套
+
 `Grid` 可以多层嵌套使用
 
 <code src='./demo/nested.tsx' title='嵌套使用' />
+<code src='./demo/nested-container.tsx' title='嵌套 container' />
 
 ### 间距