fix

src/client/js/components/PageEditor/GridEditModal.jsx

@@ -85,14 +85,14 @@ export default class GridEditModal extends React.Component {
           {gridDivisions.map((gridDivion, i) => {
             return (
               <div className="col-md-4 text-center">
-                <h6 className="dropdown-header">{i + 2}分割</h6>
-                {gridDivion.map((gridOneDivision) => {
+                <h6 className="dropdown-header">{gridDivion.numberOfGridDivisions}分割</h6>
+                {gridDivion.mapping.map((gridOneDivision) => {
                   return (
                     <button className="dropdown-item" type="button" onClick={() => { this.checkColsRatios(gridOneDivision) }}>
                       <div className="row">
-                        {gridOneDivision.map((gtd) => {
-                          const className = `bg-info col-${gtd} border`;
-                          return <span className={className}>{gtd}</span>;
+                        {gridOneDivision.map((god) => {
+                          const className = `bg-info col-${god} border`;
+                          return <span className={className}>{god}</span>;
                         })}
                       </div>
                     </button>

src/client/js/components/PageEditor/GridEditorUtil.js

@@ -8,15 +8,18 @@ class GridEditorUtil {
     this.lineBeginPartOfGridRE = /^:::(\s.*)editable-row$/;
     this.lineEndPartOfGridRE = /^:::$/;
     this.mappingAllGridDivisionPatterns = [
-      [
-        [2, 10], [4, 8], [6, 6], [8, 4], [10, 2],
-      ],
-      [
-        [2, 5, 5], [5, 2, 5], [5, 5, 2], [4, 4, 4], [3, 3, 6], [3, 6, 3], [6, 3, 3],
-      ],
-      [
-        [2, 2, 4, 4], [4, 4, 2, 2], [2, 4, 2, 4], [4, 2, 4, 2], [3, 3, 3, 3], [2, 2, 2, 6], [6, 2, 2, 2],
-      ],
+      {
+        numberOfGridDivisions: 2,
+        mapping: [[2, 10], [4, 8], [6, 6], [8, 4], [10, 2]],
+      },
+      {
+        numberOfGridDivisions: 3,
+        mapping: [[2, 5, 5], [5, 2, 5], [5, 5, 2], [4, 4, 4], [3, 3, 6], [3, 6, 3], [6, 3, 3]],
+      },
+      {
+        numberOfGridDivisions: 4,
+        mapping: [[2, 2, 4, 4], [4, 4, 2, 2], [2, 4, 2, 4], [4, 2, 4, 2], [3, 3, 3, 3], [2, 2, 2, 6], [6, 2, 2, 2]],
+      },
     ];
     this.isInGridBlock = this.isInGridBlock.bind(this);
     this.replaceGridWithHtmlWithEditor = this.replaceGridWithHtmlWithEditor.bind(this);

src/client/styles/scss/_on-edit.scss

@@ -325,7 +325,9 @@ body.on-edit {
   }
 
   .grid-division-menu {
-    //[TODO: responsive by gw-3244]
-    width: 1000px;
+    width: 60vw;
+    @include media-breakpoint-down(lg) {
+      width: 80vw;
+    }
   }
 }