From 7aaf58376576c413f25c3972cddb09cb6940f96e Mon Sep 17 00:00:00 2001
From: David DeSandro <david@desandro.com>
Date: Thu, 10 Nov 2011 08:10:51 -0500
Subject: [PATCH] docs : help : first item breaks masonry layout

fixes # 109
---
 _posts/docs/2011-12-11-help.mdown | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/_posts/docs/2011-12-11-help.mdown b/_posts/docs/2011-12-11-help.mdown
index 7b60774..e61a748 100644
--- a/_posts/docs/2011-12-11-help.mdown
+++ b/_posts/docs/2011-12-11-help.mdown
@@ -15,6 +15,7 @@ toc:
   - { title: Infinite Scroll with filtering or sorting, anchor: infinite_scroll_with_filtering_or_sorting}
   - { title: Flash, anchor: flash }
   - { title: Poor type rendering in WebKit, anchor: poor_type_rendering_in_webkit }
+  - { title: First item breaks Masonry layout, anchor: first_item_breaks_masonry_layout }
   - { title: Right-to-left layouts, anchor: righttoleft_layouts }
   - { title: Preventing clicks on filtered items, anchor: unclickable-filtered }
 
@@ -169,6 +170,20 @@ $('#container').isotope({
 
 Type rendering may appear poor in WebKit browsers like Chrome and Safari. This is because of Isotope's activation of hardware acceleration. The solution is to add add a matching background to the item elements. See more: [dropshado.ws - Resolving anti-aliasing on WebKit hardware-accelerated elements](http://dropshado.ws/post/6142339613/resolving-anti-aliasing-on-webkit-hardware-accelerated).
 
+## First item breaks Masonry layout
+
+With [Masonry layout mode](layout-modes.html#masonry) If you run into an issue where you re-size the first item, and all the rest of the items no longer fit together in the grid, you most likely need to set [`columnWidth` option](layout-modes.html#masonry-options). Without `columnWidth` set, the Masonry layout mode will use the width of the first item for the size of its columns.
+
+{% highlight javascript %}
+
+$('#container').isotope(
+  masonry: {
+    columnWidth: 220
+  }
+});
+
+{% endhighlight %}
+
 ## Right-to-left layouts
 
 Isotope can be modified to support right-to-left layouts for languages like Hebrew and Arabic.