From cac1ff395f1e27711e3cee0f99f3c2c40bc14007 Mon Sep 17 00:00:00 2001
From: anlyyao <anly_yaw@163.com>
Date: Tue, 24 Jun 2025 18:59:50 +0800
Subject: [PATCH] fix(Grid): fix the border style error when the griditems is
 not an integer multiple of columns

---
 src/grid-item/grid-item.ts        | 4 ++--
 src/grid/__test__/index.test.js   | 8 ++++----
 src/grid/grid.ts                  | 4 ++--
 src/upload/__test__/index.test.js | 2 +-
 4 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/grid-item/grid-item.ts b/src/grid-item/grid-item.ts
index 004fc5fbeb..1022d66f6d 100644
--- a/src/grid-item/grid-item.ts
+++ b/src/grid-item/grid-item.ts
@@ -102,7 +102,7 @@ export default class GridItem extends SuperComponent {
   // 获取应该加在gridWrap上的padding
   getPaddingStyle() {
     const { gutter } = this.parent.properties;
-    if (gutter) return `padding-left:${gutter}rpx;padding-top:${gutter}rpx`;
+    if (gutter) return `padding-bottom:${gutter}rpx;padding-right:${gutter}rpx`;
     return '';
   }
 
@@ -114,7 +114,7 @@ export default class GridItem extends SuperComponent {
     if (!isObject(border)) border = {} as any;
     const { color = '#266FE8', width = 2, style = 'solid' } = border as any;
     if (gutter) return `border:${width}rpx ${style} ${color}`;
-    return `border-top:${width}rpx ${style} ${color};border-left:${width}rpx ${style} ${color}`;
+    return `border-bottom:${width}rpx ${style} ${color};border-right:${width}rpx ${style} ${color}`;
   }
 
   onClick(e) {
diff --git a/src/grid/__test__/index.test.js b/src/grid/__test__/index.test.js
index 2a7267dc7f..fcc77ef120 100644
--- a/src/grid/__test__/index.test.js
+++ b/src/grid/__test__/index.test.js
@@ -26,13 +26,13 @@ describe('grid', () => {
     comp.attach(document.createElement('parent-wrapper'));
 
     const $content = comp.querySelector('#grid >>> .t-grid__content');
-    expect($content.dom.style.marginLeft).toBe('-4px');
+    expect($content.dom.style.marginRight).toBe('-4px');
 
     comp.setData({ border: true });
-    expect($content.dom.style.marginLeft).toBe('-2px');
+    expect($content.dom.style.marginRight).toBe('-2px');
 
     comp.setData({ border: {} });
-    expect($content.dom.style.marginLeft).toBe('-2px');
+    expect($content.dom.style.marginRight).toBe('-2px');
   });
 
   it(':gutter', () => {
@@ -42,7 +42,7 @@ describe('grid', () => {
     comp.setData({ gutter: 0 });
 
     const $content = comp.querySelector('#grid >>> .t-grid__content');
-    expect($content.dom.style.marginLeft).toBe('-0px');
+    expect($content.dom.style.marginRight).toBe('-0px');
   });
 
   it(':event', async () => {
diff --git a/src/grid/grid.ts b/src/grid/grid.ts
index 44a3d34655..64fba176bf 100644
--- a/src/grid/grid.ts
+++ b/src/grid/grid.ts
@@ -55,10 +55,10 @@ export default class Grid extends SuperComponent {
       const { gutter } = this.properties;
       let { border } = this.properties;
 
-      if (!border) return `margin-left:-${gutter}rpx; margin-top:-${gutter}rpx`;
+      if (!border) return `margin-bottom:-${gutter}rpx; margin-right:-${gutter}rpx`;
       if (!isObject(border)) border = {} as any;
       const { width = 2 } = border as any;
-      return `margin-left:-${width}rpx; margin-top:-${width}rpx`;
+      return `margin-bottom:-${width}rpx; margin-right:-${width}rpx`;
     },
   };
 }
diff --git a/src/upload/__test__/index.test.js b/src/upload/__test__/index.test.js
index a6642522a6..8fff6c2658 100644
--- a/src/upload/__test__/index.test.js
+++ b/src/upload/__test__/index.test.js
@@ -152,7 +152,7 @@ describe('upload', () => {
       const $gridItem = comp.querySelector('#t-upload >>> .t-grid-item');
       // gutter = 16, 单位 rpx
       expect($gridContent.dom.getAttribute('style')).toEqual(
-        `margin-left:-${comp.data.gutter}px; margin-top:-${comp.data.gutter}px`,
+        `margin-bottom:-${comp.data.gutter}px; margin-right:-${comp.data.gutter}px`,
       );
 
       // gridConfig: width、 height