describe how to setup non-12-column grid

troolee · troolee · commit 3ca3b6cc810e · 2015-01-04T19:46:10.000-08:00
diff --git a/README.md b/README.md
@@ -304,6 +304,35 @@ and HTML:
 <div data-bind="component: {name: 'dashboard-grid', params: $data}"></div>
 ```
 
+## Change grid width
+
+To addition to `width` option, CSS rules for `.grid-stack-item[data-gs-width="X"]` and 
+`.grid-stack-item[data-gs-x="X"]` have to be changed accordingly (see #38). 
+
+For 3-column grid you need to rewrite CSS to be:
+
+```css
+.grid-stack-item[data-gs-width="3"]  { width: 100% }
+.grid-stack-item[data-gs-width="2"]  { width: 66.66666667% }
+.grid-stack-item[data-gs-width="1"]  { width: 33.33333333% }
+
+.grid-stack-item[data-gs-x="2"]  { left: 66.66666667% }
+.grid-stack-item[data-gs-x="1"]  { left: 33.33333333% }
+```
+
+For 4-column grid it should be:
+
+```css
+.grid-stack-item[data-gs-width="4"]  { width: 100% }
+.grid-stack-item[data-gs-width="3"]  { width: 75% }
+.grid-stack-item[data-gs-width="2"]  { width: 50% }
+.grid-stack-item[data-gs-width="1"]  { width: 25% }
+
+.grid-stack-item[data-gs-x="3"]  { left: 75% }
+.grid-stack-item[data-gs-x="2"]  { left: 50% }
+.grid-stack-item[data-gs-x="1"]  { left: 25% }
+```
+
 
 Changes
 =======
