diff --git a/README.md b/README.md index 16bf176..a48ce03 100644 --- a/README.md +++ b/README.md @@ -304,6 +304,35 @@ and HTML:
``` +## 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 =======