diff --git a/src/components/CodemirrorEditor/CssEditor.vue b/src/components/CodemirrorEditor/CssEditor.vue
index ab43fb1a8..8f2a185f4 100644
--- a/src/components/CodemirrorEditor/CssEditor.vue
+++ b/src/components/CodemirrorEditor/CssEditor.vue
@@ -12,7 +12,7 @@ export default {
 
 <template>
   <transition enter-active-class="bounceInRight">
-    <el-col v-show="showCssEditor" :span="12" class="cssEditor-wrapper">
+    <el-col v-show="showCssEditor" :span="8" class="cssEditor-wrapper">
       <textarea
         id="cssEditor"
         type="textarea"
diff --git a/src/views/CodemirrorEditor.vue b/src/views/CodemirrorEditor.vue
index 47da08df2..b366044cc 100644
--- a/src/views/CodemirrorEditor.vue
+++ b/src/views/CodemirrorEditor.vue
@@ -561,7 +561,7 @@ export default {
           <el-col
             ref="codeMirrorWrapper"
             :style="{ order: store.isEditOnLeft ? 0 : 1 }"
-            :span="12"
+            :span="showCssEditor ? 8 : 12"
             class="codeMirror-wrapper"
             @contextmenu.prevent="openMenu"
           >
@@ -575,7 +575,7 @@ export default {
           <el-col
             id="preview"
             ref="preview"
-            :span="12"
+            :span="showCssEditor ? 8 : 12"
             class="preview-wrapper"
             :class="{
               'preview-wrapper_night': nightMode && isCoping,