Gridstack.js: Improvement Suggestion

Created on 2 Mar 2015 · 6Comments · Source: gridstack/gridstack.js

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; }
    }
}

Source

ascendantofrain

❤1 👍1

All 6 comments

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

troolee on 2 Mar 2015

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; }
            }
         }
      }
   }
}

abologna-r7 on 28 Apr 2015

👍1

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);
}

cspeer on 9 Dec 2015

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

mandys on 15 May 2017

👍1

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

mrmowji on 10 Feb 2018

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; }
    }
}