Merge pull request #9 from oscmedgon/development

Fixed bug where the content can resize the size of a column

Author: oscmedgon

build/index.js

@@ -1,6 +1,6 @@
 {
     "name": "react-grid-easy",
-    "version": "2.0.2",
+    "version": "2.0.3",
     "description": "A react grid system using css grid",
     "main": "lib/index.js",
     "repository": {

build/main.css

@@ -30,12 +30,13 @@
             & > :not([class*="col"]) {
                 grid-column: span $cols
             }
-            grid-template-columns: repeat($cols, 1fr);
+            --template-col: calc(var(--column) - var(--gap));
+            grid-template-columns: repeat($cols, var(--template-col));
             &.vertical-grid {
                 grid-template-rows: repeat($cols, 1fr);
             }
             & .row {
-                grid-template-columns: repeat($cols, 1fr);
+                grid-template-columns: repeat($cols, var(--template-col));
                 & > :not([class*="col"]) {
                     grid-column: span $cols
                 }

lib/components/Grid.js

@@ -19,12 +19,16 @@ export default class Grid extends Component {
                 className: 'grid-parent'
             }
         };
+        let columnGap;
+        params.grid.style['--column'] = `${100 / divisions}%`;
         if (['string', 'number'].includes(typeof gap)) {
             params.grid.style.gridGap = gap;
+            params.grid.style['--gap'] = `${((divisions - 1) * gap) / divisions}px`;
         } else if (typeof gap === 'object' && gap && !Array.isArray(gap)) {
             const {column = 21, row = 21} = gap;
             params.grid.style.rowGap = row;
             params.grid.style.columnGap = column;
+            params.grid.style['--gap'] = `${((divisions - 1) * column) / divisions}px`;
         } else {
             const error = new Error('Expected gap to be string, number or object.');
             console.error(error.stack)
@@ -39,7 +43,7 @@ export default class Grid extends Component {
         }
         return (
             <section {...params.parent}>
-                <section {...params.grid}>
+                <section {...params.grid} data-gap={columnGap}>
                     {children}
                 </section>
             </section>