Show grid lines

[ronvanpol]

Does anyone have any idea of how to add grid lines to a gridstack? When working with bigger gridstacks, it helps a lot to place an item on the gridstack if grid lines could be shown (for instance like Excel)

[radiolips]

Good question, @ronvanpol . You'll want to do this with CSS. Maybe someone better than I am at CSS will be able to offer you some assistance. If not, I'll spend some time looking into it when I have a chance. Thanks for using gridstack! You may want to check out the gridstack Slack to get a wider audience's attention as well

[sohaib-khan]

Hi @radiolips. Is there any update on showing grid lines lets say if a grid is initialized for 12 col and 12 rows to begin with?

[radiolips]

Hey @sohaib-khan . We haven't had a chance to look into that just yet. We're hard at work with some bugs and major 1.0 features. When I have a chance to look into these grid lines, I'll update this ticket. Thanks for the ping. I'd love to one day make gridstack.js a full-time job, but for the time being, I'm devoting as much time as I can :).

[sohaib-khan]

@radiolips great! I will be following when this new feature kicks in. It will be a good visual cue for snapping divs to the grid.

[imPrashik]

Hi we can try following css workaround for now(try manipulating background-size based on ur requirement):

.grid-stack {
   /* background-color: #eeeeee; */
background-image: linear-gradient(#e0e0e0 1px, transparent 1px), linear-gradient(90deg, #e0e0e0 1px, transparent 0px), linear-gradient(rgba(255,255,255,.3) 5px, transparent 100px), linear-gradient(90deg, rgba(255,255,255,.3) 5px, transparent 100px);
background-size: 100px 62px, calc(8.33% + 0px) 100px, 20px 20px, 20px 20px;
background-position: -2px -2px, -1px -2px, -1px -1px, -1px -1px;}  

[dfenerski]

is there a way to combine the solution mentioned above with usage of custom number of columns?

[tomasrivero]

Yes, the part where it says 'calc(8.33% + 0px)' replace it with 'calc(100/N% + 0px)' where N is your amount of columns

[dfenerski]

@tomasrivero this seems good, but what about the case of custom number of rows

[Justin99b]

@adumesny Any planes yet when you would implement this if you will ever implement it?

[adumesny]

@Justin99b I wasn't planning on (low on the todo list) unless someone wants to donate to make it happen

[liesahead]

Doesn't this css fit?

    background-color: #F7F7F7;
    background-size : $cell-size $cell-size;
    background-image:
        linear-gradient(to right, $border-color 1px, transparent 1px),
        linear-gradient(to bottom, $border-color 1px, transparent 1px);

[atlemagnussen]

I have used @liesahead 's example and make it work for my scenario. I always have 40 cells width, but I have dynamic number of rows

background-color: grey;
background-size: calc(100%/40) calc(100%/var(--gs-current-row, 30));
background-image:
    linear-gradient(to right, #FFF 1px, transparent 1px),
    linear-gradient(to bottom, #fff 1px, transparent 1px);

I use javascript to get the attributte gs-current-row from the grid element and then set it as a CSS Custom Property in inline style, so the CSS can use it for calc

However, for dynamic grid that will expand and shrink between min and max rows, I can't find a way to detect when the grid size changes.

Edit: I can use MutationObserver to watch for changes on gs-current-row Would be nice with an event from Gridstack :-)

[delvinwidjaja]

hi everyone, i've been trying to adjust the grid line so it would look like this but havent found any solution (yet):

any suggestion is appreciated. thanks!