diff --git a/frontend/src/views/panel/edit/ComponentWait.vue b/frontend/src/views/panel/edit/ComponentWait.vue
index 9dd2301140..adc4f2c09b 100644
--- a/frontend/src/views/panel/edit/ComponentWait.vue
+++ b/frontend/src/views/panel/edit/ComponentWait.vue
@@ -4,13 +4,18 @@
       {{ $t('panel.component_hidden') }}
     </el-row>
     <el-row class="component-wait-main">
-      <component-wait-item
+      <el-col
+        :span="8"
         v-for="(config, index) in pcComponentData"
         v-if="!config.mobileSelected"
         :id="'wait' + config.id"
         :key="index"
-        :config="config"
-      />
+      >
+        <component-wait-item
+          :config="config"
+        />
+      </el-col>
+
     </el-row>
 
   </el-row>
@@ -81,7 +86,7 @@ export default {
   .component-wait-main {
     width: 100%;
     height: calc(100% - 30px);
-    text-align: left;
+    float: left;
     overflow-y: auto;
   }
   .component-custom {
diff --git a/frontend/src/views/panel/edit/ComponentWaitItem.vue b/frontend/src/views/panel/edit/ComponentWaitItem.vue
index 0b7181a53e..24014a5324 100644
--- a/frontend/src/views/panel/edit/ComponentWaitItem.vue
+++ b/frontend/src/views/panel/edit/ComponentWaitItem.vue
@@ -69,9 +69,7 @@ export default {
     },
     componentItemStyle() {
       return {
-        padding: '5px',
-        float: 'left',
-        width: '33%'
+        padding: '5px'
       }
     },
     ...mapState([