Using CSS grid for positioning items rather than top/left

[sebastianwebb]

I see you use CSS rules to position the items, with position: absolute and top/left. Could these be substituted for CSS grid line coordinates without breaking the script?

Thanks for building and sharing an awesome tool!

Sebastian

[adumesny]

@sebastianwebb could you give a concrete example and what the benefit would be ?
https://www.w3schools.com/css/css_grid.asp

right now the output CSS from sass looks like this for 12 column default

.grid-stack > .grid-stack-item {
  min-width: 8.3333333333%;
  position: absolute;
  padding: 0;
}

.grid-stack>.grid-stack-item[data-gs-width='1'] {
  width: 8.3333333333%;
}
.grid-stack>.grid-stack-item[data-gs-x='1'] {
  left: 8.3333333333%;
}
.grid-stack>.grid-stack-item[data-gs-min-width='1'] {
  min-width: 8.3333333333%;
}
.grid-stack>.grid-stack-item[data-gs-max-width='1'] {
  max-width: 8.3333333333%;
}
.grid-stack>.grid-stack-item[data-gs-width='2'] {
  width: 16.6666666667%;
}
.grid-stack>.grid-stack-item[data-gs-x='2'] {
  left: 16.6666666667%;
}
.grid-stack>.grid-stack-item[data-gs-min-width='2'] {
  min-width: 16.6666666667%;
}
.grid-stack>.grid-stack-item[data-gs-max-width='2'] {
  max-width: 16.6666666667%;
}
etc...

[ferretwithaberet]

.grid {
    display: grid;
    grid-template-columns: repeat(12, calc(100% / numberOfColumns));
    grid-template-rows: repeat(12, calc(100% / numberOfRows));
    width: 100%;
    height: 100%;
}

.gridItem {
    grid-column-start: x;
    grid-column-end: x + width;
    grid-row-start: y;
    grid-row-end: y + height;
}

This is a simple example of a grid using CSS grid, I tried using this before I moved to your JS solution. But I am having issues with Gridstack, like not being able to make the whole grid be 100vh height and setting the cellHeight to 'auto'. I also tried setting the cellHeight to ${100 / 12}vh but that still does not work as supposed.

[sebastianwebb]

@sebastianwebb could you give a concrete example and what the benefit would be ?

Thanks for getting back to me. It's been a while since I posted so unfortunately I've forgotten my use case. But on further experimentation with the tool and I think absolute position might be better anyway. Grid column positions do not animate (unlike 'left', 'top', 'width', and 'height'), which could be a bit limiting.

[adumesny]

@sebastianwebb thanks, and good to know. Will keep this open for info and feedback...

[ferretwithaberet]

The concept is simple, the grid-stack element will have the following properties:

.grid-stack {
  display: grid /* Or inline-grid, if inline-grid it will also have a width */;
  grid-auto-columns: 1fr;
  grid-auto-rows: 20px; /* This could also be set from js through style */
}

then we can have each grid-stack-item have it's position set from js using style:

item.style.gridColumnStart = x;
item.style.gridColumnEnd = x + width;
item.style.gridRowStart = y;
item.style.gridRowEnd = y + height;

The harder part, that I kind of have an idea already on how would work is the drag'n'drop which could be done something like:

// Pseudocode
dropCellX = Math.round(drop.x / cellWidth)
dropCellY = Math.round(drop.y / cellHeight)

It would need major rewritting of the engine I guess, but it will make everyone's life wayyy easier in the end imo.

[MarkH170]

I have been trying to get this working for some time but didn't have any luck so far.
Did anyone make an attempt to get this working in the mean time?

[adumesny]

@MarkH170 I have this marked as 'won't' fix as loosing animation (according to above post #1012 (comment)) is un-acceptable IMO, and not clear what the gain would really be...

[sdraper69]

I think the ability to use a css grid would be great. I think the gain here would be the ability to explicitly define a grid with the correct number of columns and rows. E.g. i could make a full screen div with a grid of 100 x 100 very easily. grid stack will then let me move the object about said grid and resize etc but the grid itself is defined and fixed. Unless I am missing something this seems impossible to do currently? Further more, whilst not as "sexy", I personally would happily if you do loose animation in favour of a properly defined grid

[ferretwithaberet]

Thanks for getting back to me. It's been a while since I posted so unfortunately I've forgotten my use case. But on further experimentation with the tool and I think absolute position might be better anyway. Grid column positions do not animate (unlike 'left', 'top', 'width', and 'height'), which could be a bit limiting.

@MarkH170 I have this marked as 'won't' fix as loosing animation (according to above post #1012 (comment)) is un-acceptable IMO, and not clear what the gain would really be...

I think the ability to use a css grid would be great. I think the gain here would be the ability to explicitly define a grid with the correct number of columns and rows. E.g. i could make a full screen div with a grid of 100 x 100 very easily. grid stack will then let me move the object about said grid and resize etc but the grid itself is defined and fixed. Unless I am missing something this seems impossible to do currently? Further more, whilst not as "sexy", I personally would happily if you do loose animation in favour of a properly defined grid

I do not think that gridstack relies on such properties for animations, furthermore for this exact case you can remove the element from the grid, give it absolute positioning, animate and then add it back into the grid. Yes, it requires more steps(computing where to position the element absolutely and where to animate it to). I am not sure if the animation will be as smooth as when having the element positioned absolutely from the start or how it will react when changing the number of rows dynamically on the fly, but at least the grid will be properly defined. I think this is possible but as I said in the past:

It would need major rewritting of the engine I guess, but it will make everyone's life wayyy easier in the end imo.

also, this feature needs experimenting with css-grid to see how well it will animate when giving the item position absolute moving it into the right place, then placing it back into the css-grid.

The best feat of implementing css-grid in my opinion is dynamically defined columns(currently gridstack uses SCSS to generate CSS files for supporting grids with a custom number of columns).