From 2d4e739cbffe394f1e27c541414ae72d01339941 Mon Sep 17 00:00:00 2001
From: xuopled <xuopled@gmail.com>
Date: Thu, 13 Apr 2017 18:30:12 +0200
Subject: [PATCH] Add:  prop on  component

---
 CHANGELOG.md   | 4 ++++
 README.md      | 1 +
 package.json   | 2 +-
 src/Masonry.js | 8 ++++----
 4 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b8bfcb7..2a9b1ce 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,3 +2,7 @@
 
 * Add: `Masonry` component
 * Add: `ResponsiveMasonry` component
+
+# 1.1.0 - 2017-04-13
+
+* Add: `gutter` prop on `Mansory` component
diff --git a/README.md b/README.md
index a7e24d2..8b4ba1c 100644
--- a/README.md
+++ b/README.md
@@ -66,6 +66,7 @@ class MyWrapper extends Component {
 
 ### Mansonry component
   * `columnsCount`: Number - injected by ResponsiveMasonry - default 3,
+  * `gutter`: String - margin surrounding each item (in pixels) - default "0",
 
 ### ResponsiveMasonry component
   * `columnsCountBreakPoints`: Object, keys are breakpoints in px, values are the columns number - default {350: 1, 750: 2, 900: 3},
diff --git a/package.json b/package.json
index 46fcb47..d869119 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-responsive-masonry",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "React responsive masonry component built with css flexbox",
   "browser": "./dist/index.js",
   "main": "lib/index.js",
diff --git a/src/Masonry.js b/src/Masonry.js
index f114b9c..b3e7382 100644
--- a/src/Masonry.js
+++ b/src/Masonry.js
@@ -17,9 +17,6 @@ const styles = {
     flexGrow: 1,
     flexBasis: 0,
   },
-  item: {
-    margin: "5px",
-  },
 }
 
 class Masonry extends Component {
@@ -41,8 +38,9 @@ class Masonry extends Component {
   }
 
   renderColumn(column) {
+    const {gutter} = this.props
     return column.map((item, i) => (
-      <div key={i} style={styles.item}>
+      <div key={i} style={{margin: gutter}}>
         {item}
       </div>
     ))
@@ -68,10 +66,12 @@ class Masonry extends Component {
 Masonry.propTypes = {
   children: PropTypes.array.isRequired,
   columnsCount: PropTypes.number,
+  gutter: PropTypes.string,
 }
 
 Masonry.defaultProps = {
   columnsCount: 3,
+  gutter: "0",
 }
 
 export default Masonry