diff --git a/components/thorui/tui-grid-item/tui-grid-item.vue b/components/thorui/tui-grid-item/tui-grid-item.vue
index e0f1ea31a1a9b81f2928ef58271e20760bb44989..a53acc38ea5e8a8a786407521c7ec7cdf339e15b 100644
--- a/components/thorui/tui-grid-item/tui-grid-item.vue
+++ b/components/thorui/tui-grid-item/tui-grid-item.vue
@@ -1,6 +1,6 @@
 <template>
-	<view class="tui-grid" :class="[bottomLine?'':'tui-grid-bottom',border?'':'tui-grid__unlined','tui-grid-'+(cell<2?3:cell)]" :hover-class="hover?'tui-item-hover':''"
-	 :hover-stay-time="150" :style="{backgroundColor:backgroundColor}" @tap="handleClick">
+	<view class="tui-grid" :class="[bottomLine?'':'tui-grid-bottom',border?'':'tui-grid__unlined']" :hover-class="hover?'tui-item-hover':''"
+	 :hover-stay-time="150" :style="{backgroundColor:backgroundColor, '--cell_number': cell}" @tap="handleClick">
 		<view class='tui-grid-bg'>
 			<slot></slot>
 		</view>
@@ -50,12 +50,17 @@
 </script>
 
 <style scoped>
+	:root {
+		--cell_number: 3;
+	}
+	
 	.tui-grid {
 		position: relative;
 		padding: 40rpx 20rpx;
 		box-sizing: border-box;
 		background: #fff;
 		float: left;
+		width: calc(100% / var(--cell_number));
 	}
 
 	.tui-grid-2 {