search

ducksboard / gridster.js

gridster.js is a jQuery plugin that makes building intuitive draggable layouts from elements spanning multiple columns
http://gridster.net/
MIT License
6.03k stars 1.2k forks source link

how to change the total width of grid? #197

Open yasop opened 11 years ago

yasop commented 11 years ago

how to change the total width of the widget grid? Because it´s using only 450 px. and my posts/pages are from 640 px width. Thank you very much.

iversoncru commented 11 years ago

I want to know the same thing. I have draged and dropped blog posts fo make 3 columns, and i want the 3 columns to be 304px. I have tried setting the 304px wide in "widgets base width" but i still need to change the total width of the grid to 960px Could anyone help? thanks in advance!

Decad commented 11 years ago

Changing the total width of the grid can be done by changing the widget_base_dimensions and the widget_margins options. To calculate what your base dimensions should be use the following formula:

(desired_width / number_of_columns) - (margin * 2)

for example to get the 6 column demo markup to 960px wide with 10px margins

(960 / 6) - 20 = 140

Which would look like this:

  $(".gridster ul").gridster({
      widget_margins: [10, 10],  
      widget_base_dimensions: [140, 160] // width, height
  });
morenoh149 commented 10 years ago

@Decad I'm wondering how to add more widget columns. Seems like I can only go up to 7 columns before the widgets reflow.