diff --git a/miniprogram/pages/home/index.scss b/miniprogram/pages/home/index.scss
index d2932f9..588d636 100644
--- a/miniprogram/pages/home/index.scss
+++ b/miniprogram/pages/home/index.scss
@@ -183,18 +183,24 @@ $theme-color: #06CD31;
 // 猜你喜欢
 .recommendation {
   .product-list {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: 30rpx;
+    column-count: 2;
+    column-gap: 30rpx;
     .product-item {
       background: $white;
       padding: 8rpx;
       border-radius: 16rpx;
+      break-inside: avoid;
+      margin-bottom: 30rpx;
+      display: inline-block;
+      width: 100%;
+      box-sizing: border-box;
       .item-image {
         width: 100%;
-        height: 300rpx;
+        height: auto;
+        min-height: 200rpx;
         background: #bbb;
         border-radius: 16rpx;
+        display: block;
       }
       .item-name {
         display: block;
diff --git a/miniprogram/pages/home/index.wxml b/miniprogram/pages/home/index.wxml
index aee0084..407c1f0 100644
--- a/miniprogram/pages/home/index.wxml
+++ b/miniprogram/pages/home/index.wxml
@@ -52,7 +52,7 @@
   <view class="recommendation home-page-block-gap">
     <view class="product-list">
       <view class="product-item" wx:for="{{recommendedProducts}}" wx:key="id" bindtap="onGoCommodity" data-id="{{item.id}}">
-        <image class="item-image" src="{{item.image}}" />
+        <image class="item-image" src="{{item.image}}" mode="widthFix" />
         <text class="item-name">{{item.name}}</text>
         <!-- <view class="item-tags" wx:if="{{item.tags}}">
           <text class="tag" wx:for="{{item.tags}}" wx:key="*this">{{item}}</text>