style: split crypto market columns evenly

uniapp/src/pages/crypto/crypto.vue

@@ -565,29 +565,30 @@ $down: #ef2f3d;
 .list-header {
     height: 62rpx;
     padding: 0 26rpx 0 34rpx;
-    display: flex;
     align-items: center;
     color: #737d8b;
     font-size: 24rpx;
     border-bottom: 1rpx solid $line;
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr)) 54rpx;
 
     &__name {
-        flex: 1;
+        min-width: 0;
     }
 
     &__price {
-        width: 210rpx;
+        width: auto;
         text-align: right;
     }
 
     &__change {
-        width: 156rpx;
-        margin-left: 32rpx;
+        width: auto;
+        margin-left: 0;
         text-align: center;
     }
 
     &__favorite {
-        width: 54rpx;
+        width: auto;
     }
 }
 
@@ -600,8 +601,9 @@ $down: #ef2f3d;
 .coin-row {
     height: 112rpx;
     padding: 0 26rpx 0 34rpx;
-    display: flex;
     align-items: center;
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr)) 54rpx;
     border-bottom: 1rpx solid $line;
     box-sizing: border-box;
 
@@ -660,7 +662,8 @@ $down: #ef2f3d;
     }
 
     &__price {
-        width: 210rpx;
+        width: auto;
+        min-width: 0;
         display: flex;
         flex-direction: column;
         align-items: flex-end;
@@ -668,7 +671,7 @@ $down: #ef2f3d;
     }
 
     &__price-value {
-        max-width: 210rpx;
+        max-width: 100%;
         color: #111318;
         font-size: 27rpx;
         line-height: 1.1;
@@ -686,8 +689,9 @@ $down: #ef2f3d;
 
     &__badge {
         width: 156rpx;
+        max-width: 100%;
         height: 54rpx;
-        margin-left: 32rpx;
+        justify-self: center;
         border-radius: 14rpx;
         display: flex;
         align-items: center;