Gridstack.js: 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