Improvement Suggestion

[ascendantofrain]

Just a little something I made for my own project using this framework.

I use SASS with my application and using this little snippet makes adjusting grids MUCH easier.

.grid-stack-item {

    $gridstack-columns: 12;

    @for $i from 1 through $gridstack-columns {
        &[data-gs-width='#{$i}'] { width: (100% / $gridstack-columns) * $i; }
        &[data-gs-x='#{$i}'] { left: (100% / $gridstack-columns) * $i; }
        &.grid-stack-item[data-gs-min-width='#{$i}'] { min-width: (100% / $gridstack-columns) * $i; }
        &.grid-stack-item[data-gs-max-width='#{$i}'] { max-width: (100% / $gridstack-columns) * $i; }
    }
}

[troolee]

I've update README with your snippet. Thank you.

[abologna-r7]

Late to the conversation but you might also want to have the width variable, either in percentage or pixels, since being responsive and fluid not always works hand to hand... One thing is to have a responsive container, and another one is to have a responsive widget so sometimes having pixel dimensions is not a bad idea.

So if you put that logic inside a media query you can have different pixel/percentage based widgets sizes.

$gridstack-columns: 12;
$resolution: 1440px;

@media (min-width: 1440px) {
   .container {
      .grid-stack {
         .grid-stack-item {
            position: absolute !important;

            @for $i from 1 through $gridstack-columns {
               &[data-gs-width='#{$i}'] { width: ($resolution / $gridstack-columns) * $i; }
               &[data-gs-x='#{$i}'] { left: ($resolution / $gridstack-columns) * $i; }
               &.grid-stack-item[data-gs-min-width='#{$i}'] { min-width: ($resolution / $gridstack-columns) * $i; }
               &.grid-stack-item[data-gs-max-width='#{$i}'] { max-width: ($resolution / $gridstack-columns) * $i; }
            }
         }
      }
   }
}

[cspeer]

Here is a less css version:

@columns: 6;
.gs-item(@n) when (@n > 0) {
  .gs-item(@n - 1);

  &[data-gs-width="@{n}"] { width: (100% / @columns) * @n; }
  &[data-gs-x="@{n}"] { left: (100% / @columns) * @n; }
  &[data-gs-min-width="@{n}"] { min-width: (100% / @columns) * @n; }
  &[data-gs-max-width="@{n}"] { max-width: (100% / @columns) * @n; }
}

.grid-stack-item {
  .gs-item(@columns);
}

[mandys]

@ascendantofrain @cspeer @troolee @radiolips does this still work ?
i made columns as 36, ran sass, used it in the code, the widths now use %s based on 36 columns, but drag/drop has undesired experience. I am unable to drag and drop in a 36 column grid, it keeps moving here and there. Did we need js changes as well ? Doesn't look like...

[mrmowji]

@mandys @ascendantofrain I think it's because of core gridstack.css styles. You must override them:

.grid-stack > .grid-stack-item {

    $gridstack-columns: 200;

    @for $i from 1 through $gridstack-columns {
        &[data-gs-width='#{$i}'] { width: (100% / $gridstack-columns) * $i; }
        &[data-gs-x='#{$i}'] { left: (100% / $gridstack-columns) * $i; }
        &.grid-stack-item[data-gs-min-width='#{$i}'] { min-width: (100% / $gridstack-columns) * $i; }
        &.grid-stack-item[data-gs-max-width='#{$i}'] { max-width: (100% / $gridstack-columns) * $i; }
    }
}

But I couldn't solve the overlapping items problem yet.

[rami-alloush]

I had to add the min-width as well for it to work on version 0.3 (which I use to solve the overlapping problem btw.)

.grid-stack > .grid-stack-item {

    $gridstack-columns: 36;

    @for $i from 1 through $gridstack-columns {
        &[data-gs-width='#{$i}'] { 
          width: (100% / $gridstack-columns) * $i;
          min-width: (100% / $gridstack-columns) * $i; 
        }
        &[data-gs-x='#{$i}'] { left: (100% / $gridstack-columns) * $i; }
        &.grid-stack-item[data-gs-min-width='#{$i}'] { min-width: (100% / $gridstack-columns) * $i; }
        &.grid-stack-item[data-gs-max-width='#{$i}'] { max-width: (100% / $gridstack-columns) * $i; }
    }
}