deblan/gridstack.js
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

describe how to setup non-12-column grid

Browse source
This commit is contained in:
Pavel Reznikov 2015-01-04 19:46:07 -08:00
commit 3ca3b6cc81
1 changed files with 29 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

29
README.md
View file

@ -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
=======