Customizable grid size

src/components/UI/Grid/Grid.js

@@ -2,6 +2,8 @@ import React, {Component} from 'react';
 import './Grid.css';
 import GridComponent from './GridComponent/GridComponent';
 
+const DEFAULT_GRID_SIZE = 4;
+
 export default class extends Component {
   resizeTimeout;
   state = {
@@ -12,10 +14,10 @@ export default class extends Component {
     }
   };
 
-  calculateDimensions = (size) => {
+  calculateDimensions = size => {
     return {
-      columns: Math.floor(size.width / 4),
+      columns: Math.floor(size.width / this.getGridSize()),
-      rows: Math.floor(size.height / 4)
+      rows: Math.floor(size.height / this.getGridSize())
     };
   };
 
@@ -29,6 +31,14 @@ export default class extends Component {
     clearInterval(this.resizeTimeout);
   };
 
+  getGridSize = () => {
+    return this.props.gridSize || DEFAULT_GRID_SIZE;
+  };
+
+  getGridSizePx = () => {
+    return this.getGridSize() + 'px ';
+  };
+
   getSize = () => {
     const elem = this.refs.GridOwner;
     return {
@@ -106,12 +116,13 @@ export default class extends Component {
       });
     }
 
+    const gridSizePx = this.getGridSizePx();
     let style = {
       style: {
-        gridTemplateColumns: '4px '.repeat(dimensions.columns).trim(),
+        gridTemplateColumns: gridSizePx.repeat(dimensions.columns),
-        gridTemplateRows: '4px '.repeat(dimensions.rows).trim(),
+        gridTemplateRows: gridSizePx.repeat(dimensions.rows),
-        gridAutoColumns: '4px',
+        gridAutoColumns: gridSizePx,
-        gridAutoRows: '4px',
+        gridAutoRows: gridSizePx,
       }
     };